レスポンシブのメディアクエリ指定を悩んでる方のために、考えるきっかけとして参考に、
最近トレンドのCSSフレームワークのメディアクエリ指定がどうなっているかをまとめてみました。
※ こうあるべきという結論はないです

各CSSフレームワークのメデイアクエリ指定のまとめは、最後に書きました

検証したCSSフレームワーク

・Bulma
・Tailwind
・UIkit
・Bootstrap4
・Materialize
・Foundation
・Semantic UI
・Pure
・SkyBlue
・Skeleton

※こちらを参考にしました
https://webdesign-trends.net/entry/2177

比べてみてわかったこと

4つの考え方が見えてきました。

1.モバイルファースト（min-width”のみ”）で指定

・Tailwind
・Pure
・Skeleton

メディアクエリの指定をモバイルファーストを基準に設定（つまり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」の精度で、切り替えるポイントを指定

・Bootstrap4
・Foundation

これはおそらく、どちらか”のみ”にスタイルが当たる指定の仕方をしているので、1px間で両方のスタイルが当たらない幅があると考えているからかと思います。
以上 / 以下 で完全に切り分けてスタイルを定義しようとしてる（所もある）ので、「1.」の考え方とは、思想が違ってそうですね。

3.デバイス幅をきっちり意識せずに指定

・Skeleton

iPadなどのタブレットデバイス（縦持ちの時の幅）を意識した、
よく見る 767px(768px)のような指定方法ではない パターンです。
他が軒並み意識してるのに対して、切りのいい数値であっさり指定しています。
これだけデバイスの種類が増えてきているので、もうデバイス幅にそこまで厳密に振り回される必要はない
という考えもありかなと思います

4. ”px”ではなく、”em”で指定

・Foundation
・Pure

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