LoginSignup
2

More than 3 years have passed since last update.

トレンドのCSSフレームワークの、メディアクエリ指定を比べてみた

Last updated at Posted at 2020-01-04

レスポンシブのメディアクエリ指定を悩んでる方のために、考えるきっかけとして参考に、
最近トレンドの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だけで指定)しているか?というのは、1つポイントかなと思います。

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

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

補足

※ フレームワークによっては、 サイト内でメディアクエリの値をカスタマイズできるものもある ため、上記に示すもので必ずしも固定されているわけではありません。
表記はあくまでもデフォルトで設定されている数値の話です。詳しくは、各公式サイトでご確認ください。

調べが浅いので、また吸収して情報更新していきます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2