CSSのブレイクポイントの書き方。メディアクエリはいくつがおすすめ？
です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。
ブレイクポイントの最小は320px？
スマホの元祖である、初代iPhoneの横幅は320pxだった。
それが基準となっているのか、2023年時点でも、320pxからのアクセスがある。
320pxは現存している。
320pxからのアクセスは、Googleアナリティクスを調べているとわかる。例えば月間約10,000〜15,000ユーザーのサイトで、70〜80ユーザーほど計測されていた。
320pxのデバイスといえは、iPhone SEの第一世代も該当するが、さすがに初代iPhoneや初代iiPhone SEユーザーはレアケースだろう。
なぜいま320px？
それなのになぜ、320pxのユーザーがいるのだろうか？
結論としては、iPhone 12〜iPhone 13、iPhone 12 pro〜iPhone 14シリーズの一部で「拡大（Zoom）」機能を使っているユーザーが一定数いると考えられる。
アナリティクスで見る限り、数は少なめだが滞在時間が長め、という特徴があった。
なので、おそらくは高齢者や目に問題を抱える方々だと思われる。無視することはできない。
拡大（Zoom）機能とは？
iPhoneの画面を三本指でダブルタップ、トリプルタップすると、画面が拡大される。
引用元：How To Use Display Zoom iPhone 13 by TomsTechReviews
375px、もしくは360pxのデバイスもある。
iPhone 8〜iPhone 13 mini、iPhone SEシリーズの一部、iPhone 14シリーズの一部（「拡大（Zoom）」機能含め）は375pxとなっている。
参考：iPhone 14の解像度と、画像サイズ、CSSのピクセル設定をどうするか？
また、Androidスマホでは、360pxのデバイスもある。
メディアクエリでのブレイクポイントの指定例。
モバイルファーストで書く。
メディアクエリはモバイルファーストで書いた方が良い。パソコン向けから書いてしまうと、CSSの読み込み量が多くなり、結果的にスマホサイトの表示が遅くなってしまうからだ。
一般的なサイトの場合、アクセス数自体もパソコンよりもスマホの方が多い。
モバイルファーストについては、Googleも推奨し続けている。
ブレイクポイントの書き方の具体例。
以下のような記述であれば、320pxや360px、375pxという記述をする必要がない。
デベロッパーツールなどを使い、320px〜375pxのサイズで縦（ポートレイト）の表示を確認しながら、ブレイクポイントは横（ランドスケープ）に合わせていく。
例１）
ポートレイトとランドスケープを切り分けず、キリが良い数字にしたい場合。
@media (min-width: 400px){
.content {
width: 100%;
padding: 2%;
}
}
例２）
ポートレイトとランドスケープを切り分けず、キリが良い数字にしたい場合。
@media (min-width: 600px){
.content {
width: 100%;
padding: 10px;
}
}
例３）
ポートレイトとランドスケープを切り分け、iPhone 8やiPhone SE2も視野に入れる場合。
@media (min-width: 667px){
.content {
width: 100%;
padding: 2%;
}
}
例４）
ポートレイトとランドスケープを切り分け、幅広いデバイスを視野に入れる場合。
@media (min-width: 568px){
.content {
width: 100%;
padding: 10px;
}
}
補足。
- @media (min-width: 320px){}の書き方は、まずほとんど意味がない。
- 568pxや、667px、414pxなどの数値は、新しいデバイスが発売されるたびに変わるので、明確な答えにはならない。
- 余白用のpaddingやmarginは、パーセントでの指定か、小さくキリがよいピクセルで指定する。
結論。
サイトの特性や職場環境、クライアントの要望、ターゲットとするスマホやタブレットのサイズに合わせて調整すると良いだろう。
また、「max-width: 1000px;」などはレイアウト崩れの原因となるので使わない。
メディアクエリは現在はもう「@media screen and〜」と書く必要はなく、「@media〜」で大丈夫となっている。
以上、参考になれば幸いです。
※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。
