レスポンシブのメディアクエリ指定を悩んでる方のために、考えるきっかけとして参考に、
最近トレンドのCSSフレームワークのメディアクエリ指定がどうなっているかをまとめてみました。
※ こうあるべきという結論はないです
各CSSフレームワークのメデイアクエリ指定のまとめ は、最後に書きました
検証したCSSフレームワーク
・Bulma
・Tailwind
・UIkit
・Bootstrap4
・Materialize
・Foundation
・Semantic UI
・Pure
・SkyBlue
・Skeleton
※こちらを参考にしました
https://webdesign-trends.net/entry/2177
比べてみてわかったこと
4つの考え方が見えてきました。
1.モバイルファースト（min-width”のみ”）で指定
メディアクエリの指定をモバイルファーストを基準に設定（つまりmin-widthだけで指定）しているか？というのは、１つポイントかなと思います。
Skeletonでは、メディアクエリに対して公式サイトで、はっきり下記のようなスタンスをとっていますね
MEDIA QUERIES
Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how Skeleton's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS.
（以下google翻訳）
メディアクエリ
スケルトンはメディアクエリを使用してスケーラブルなグリッドを提供しますが、デバイス間でサイトをスタイリングするのに便利なクエリのリストも持っています。クエリはモバイルファーストです。つまり、最小幅を対象としています。
モバイルファーストクエリは、スケルトンのグリッドの構築方法であり、CSSを整理するための望ましい方法です。これは、クエリ以外のすべてのスタイルがすべてのデバイスに適用されることを意味し、より大きなデバイスは拡張の対象となります。これにより、小さなデバイスが大量の未使用のCSSを解析する必要がなくなります。
引用：http://getskeleton.com/#queries
これは、私もいろんな現場に行くたびに、考え方が違うので気になってました。
2.「0.2px」の精度で、切り替えるポイントを指定
これはおそらく、どちらか”のみ”にスタイルが当たる指定の仕方をしているので、1px間で両方のスタイルが当たらない幅があると考えているからかと思います。
以上 / 以下 で完全に切り分けてスタイルを定義しようとしてる（所もある）ので、「1.」の考え方とは、思想が違ってそうですね。
3.デバイス幅をきっちり意識せずに指定
iPadなどのタブレットデバイス（縦持ちの時の幅）を意識した、
よく見る 767px(768px)のような指定方法ではない パターンです。
他が軒並み意識してるのに対して、切りのいい数値であっさり指定しています。
これだけデバイスの種類が増えてきているので、もうデバイス幅にそこまで厳密に振り回される必要はない
という考えもありかなと思います
4. ”px”ではなく、”em”で指定
emで指定することに関しては賛否あるみたいですね。（ちょっと追いきれないので割愛）
参考： https://zellwk.com/blog/media-query-units/
ただ、注目すべきは、Foundationは、
orientation: landscape/portrait（デバイスが縦長か横長かで切り替え）を指定している点です。
デバイスが、縦なのか横なのかに注目してスタイルを当ててる箇所がありました。
幅が何pxかどうかより、読みやすさに最適化されているかどうかを意識しているようですね。
扱いづらさはありますが、Webアプリなんかでは、この指定の考え方は参考になるかもしれません。
以下、実際指定されていた数値
Bulma
| max-width | min-width |
|---|---|
| 768px | 769px |
| 1023px | 1024px |
| 1215px | 1216px |
| 1407px | 1408px |
※ 769pxという指定は初めてみましたし、意図もよくわかりませんでした。（単なるバグ？）
Tailwind
| max-width | min-width |
|---|---|
| - | 640px |
| - | 768px |
| - | 1024px |
| - | 1280px |
UIkit
| max-width | min-width |
|---|---|
| 639px | 640px |
| 959px | 960px |
| 1199px | 1200px |
Bootstrap4
| max-width | min-width |
|---|---|
| 575.98px | 576px |
| 767.98px | 768px |
| 991.98px | 992px |
| 1199.98px | 1200px |
Materialize
| max-width | min-width |
|---|---|
| 600px | 601px |
| 992px | 993px |
| 1200px | 1201px |
Foundation
| max-width | min-width |
|---|---|
| 39.99875em | 40em |
| 63.99875em | 64em |
1em=16pxとした場合
| max-width | min-width |
|---|---|
| 639.98px | 640px |
| 1023.98px | 1024px |
※ orientation: landscape/portrait
Semantic UI
| max-width | min-width |
|---|---|
| 320px | |
| 767px | 768px |
| 991px | |
| 1199px | 1200px |
| 1920px |
Pure
| max-width | min-width |
|---|---|
| - | 35.5em |
| - | 48em |
| - | 64em |
| - | 80em |
1em=16pxとした場合
| max-width | min-width |
|---|---|
| - | 568px |
| - | 768px |
| - | 1024px |
| - | 1280px |
SkyBlue
| max-width | min-width |
|---|---|
| 767px | 768px |
| 991px | 992px |
| 1199px | 1200px |
| 1919px | 1920px |
Skeleton
| max-width | min-width |
|---|---|
| - | 400px |
| - | 550px |
| - | 750px |
| - | 1000px |
| - | 1200px |
補足
※ フレームワークによっては、 サイト内でメディアクエリの値をカスタマイズできるものもある ため、上記に示すもので必ずしも固定されているわけではありません。
表記はあくまでもデフォルトで設定されている数値の話です。詳しくは、各公式サイトでご確認ください。
調べが浅いので、また吸収して情報更新していきます。