こんにちはモズの木下です。
今回は自分用にも覚書になるんですがスタイル指定でのレスポンシブのサイズについて書いていきます。
基本的な記述例
こんな感じです
@media メディアのタイプ and (特定の条件){指定したいCSSの記述}
メディアのタイプについては以下
- all →全てのメディア
- screen→PCやスマホ等画面があるデバイス
- print→印刷用
- speech→音声出力
この場合ほとんどがscreenになりますね。ですので
@media screen and (画面幅の条件)
となりますね。
レスポンシブサイズの大まかな区分
画面幅の条件を大まかな基準で言うと
PC、SP、TBになりますがその中でも色々とサイズが混在すると思います。
とくにiPhoneはむちゃくちゃ大変な事になってますね。
| タブレット 横は | パソコンと同じ |
|---|---|
| タブレット 縦のみ | @media screen and (max-width: 1024px) and (orientation: portrait) |
| タブレット 縦から | @media screen and (max-width: 1024px) |
| スマホ 横のみ | @media screen and (max-width: 896px) and (orientation: landscape) |
| スマホ 横から | @media screen and (max-width: 896px) |
| スマホ 縦からは | @media screen and (max-width: 480px) |
こんな感じでしょうか？めんどくさいので簡易的に採用していきたいというのが本音です。
スマホどれで設定したらいいの？という方は下記がいいかと
スマホ縦見
@media screen and (max-width: 480px) { }タブレット縦見
@media screen and (max-width: 1024px) { }デバイス別画面幅一覧
| デバイス | 「横」の画面幅 | 「縦」の画面幅 |
|---|---|---|
| iPadAir 4 | 1180px | 820px |
| iPad Pro(12.9) | 1366px | 1024px |
| iPad Pro(11) | 1194px | 834px |
| iPad Pro(10.5) | 1112px | 834px |
| iPad | 1024px | 768px |
| iPhone 12mini | 667px | 375px |
| iPhone 12,12Pro | 884px | 390px |
| iPhone 12ProMax | 926px | 428px |
| iPhone XS Max/XR/11/11 Pro Max | 896px | 414px |
| iPhone XS/X/11 Pro | 812px | 375px |
| iPhone 8/7/6s/6 Plus | 736px | 414px |
| iPhone 8/7/6s/6 | 667px | 375px |
| iPhone 5s/5/SE | 568px | 320px |
| iPhone 4（以下） | 480px | 320px |
現在はユーザーの動向をみてもモバイルデバイスでの閲覧が８０％～９０％を占める率がほとんどのサイトばかりです。
WEBデザイナー初心者さんは特にブレイクポイントは知っておくのがよろしいかと思います。
こんなところでしょうか。
