考え方
- モバイルファースト
- デバイスは縦に利用することを基本とする。
- html > body > .row > .container
- html { width: 100%;}
- .row { width: 100%;}
- sass 2.0.1 : _02_setting.scss
.container { width: xxx;}
スマートフォン : sp
320
375 – 640
800
タブレット : ta
800 – 970
パソコン : pc
DTP max-width
1120
970 – 1120
@media (min-width: 970px) {
}Preferlance
四の倍数
4 8 … 32,48,64 128,256,512,1024,
想定
デスクトップ 1920 × 1080
ノートPC 1366 × 768
タブレット 768 × 1280
スマホ 375 × 667
320 は必要なのか？
iPhone
| 機種名 | PX WIDTH |
|---|---|
| 12 Pro max | 428 |
| 7,8,X,XS,11Pro | 375 |
iPad
| PX WIDTH | ||
|---|---|---|
| iPad Mini | 768 | |
| iPad 古いやつ | 768 | |
| iPad | 810 | |
| iPad air | 820 | |
| iPad Pro 12.9 | 1024 |