CSSフレームワークのブレイクポイントを比べてみた(Bulma, Vuetify, Element, Bootstrap, etc..) #CSS

いま開発している積読用の読書管理アプリでは、CSSフレームワークにBulmaを使ってる。
昔は、VuetifyやBootstrapを使っていたけど、ブレイクポイントが違っているのでまとめてみた(´ω｀)

ブレイクポイントのまとめ

	xs	sm	md	lg	xl
Bulma	< 769	< 1024	< 1216	< 1408	1408 <=
Bootstrap	< 576	< 767	< 992	< 1200	1200 <=
Material Design	< 600	< 1024	< 1440	< 1920	1920 <=
Vuetify	< 600	< 960	< 1264	< 1904	1904 <=
Material-UI	< 600	< 960	< 1280	< 1920	1920 <=
Element	< 768	< 992	< 1200	< 1920	1920 <=
Taillwind CSS	< 640	< 768	< 1024	< 1280	1280 <=

だいたい5段階になってるっぽい。上限や下限がそれぞれ違うのがおもしろい(´ω｀)
ちなみに単位はpx。収まらなかったので省略...

調べたのはこの7つ

Bulma ... Responsiveness | Bulma
Bootstrap ... Overview · Bootstrap
Material Design ... Responsive layout grid - Material Design
Vuetify ... Breakpoints — Vuetify.js
Material-UI ... Breakpoints - Material-UI
Element ... Component | Element
Tailwind CSS ... Breakpoints - Tailwind CSS

Material DesingはCSSフレームワークではないけど参考として。

Bulma

参照元: Responsiveness | Bulma: Free, open source, & modern CSS framework based on Flexbox

まずは使っているBulma。
Bulma独特なのが、コードがxsなどではなく、デバイスの種類になっている点。
classに書くときもわかりやすい。が、全体的に狭い範囲で細かい切り替えになっているよう。

コード	説明	範囲
mobile	Mobile	< 769px
tablet	Tablet	< 1024px
desktop	Desktop	< 1216px
widescreen	Widescreen	< 1408px
fullhd	FullHD	1408px <=

// Extra Small (phones)

// Small devices (tabletS)
@media (min-width: 770px) { ... }

// Medium devices (desktops)
@media (min-width: 1024px) { ... }

// Large devices (widescreen desktops)
@media (min-width: 1216px) { ... }

// Extra large devices (fullhd desktops)
@media (min-width: 1408px) { ... }

Bootstrap

参照元: Overview · Bootstrap

xsのブレイクポイントが一番小さいのが印象的。

コード	説明	範囲
xs	portrait phones	< 576px
sm	landscape phones	< 767px
md	tablets	< 992px
lg	desktops	< 1200px
xl	large desktops	1200px <=

// Extra Small (portrait phones)

// Small devices (landscape phones)
@media (min-width: 576px) { ... }

// Medium devices (tablets)
@media (min-width: 768px) { ... }

// Large devices (desktops)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops)
@media (min-width: 1200px) { ... }

Material Design

参照元: Responsive layout grid - Material Design

ホントの分類はこんな感じ。
縦向き・横向きでそれぞれ決められているので、かなり細かい。

コード	説明	範囲
xsmall	Portrait: small handset	< 360px
xsmall	Portrait: medium handset	< 400px
xsmall	Portrait: large handset	< 480px
xsmall	Portrait: large handset Landscape: small handset	< 600px
small	Portrait: small tablet Landscape: medium handset	< 720px
small	Portrait: large tablet Landscape: large handset	< 840px
small	Portrait: large tablet Landscape: large handset	< 960px
small	Landscape: small tablet	< 1024px
medium	Landscape: large tablet	< 1280px
medium	Landscape: large tablet	< 1440px
large		< 1600px
large		< 1920px
xlarge		1920px <=

// Extra Small (phones)


// Small devices (portrait tablets)
@media (min-width: 600px) { ... }

// Medium devices (landscape tablets)
@media (min-width: 1024px) { ... }

// Large devices (laptops)
@media (min-width: 1440px) { ... }

// Extra large devices (desktops)
@media (min-width: 1920px) { ... }

Vuetify

参照元: Breakpoints — Vuetify.js

Material Designを実現するためのCSSフレームワークなので、
Material Designと区分けが近いが、少し異なるので注意が必要かも?

コード	説明	範囲
xs	small to large handset	< 600px
sm	small to medium tablet	< 960px
md	large tablet to laptop	< 1264px
lg	desktop	< 1904px
xl	4k and ultra-wides	1904px <=

// Extra Small (small to large handset)


// Small devices (small to medium tablet)
@media (min-width: 600px) { ... }

// Medium devices (large tablet to laptop)
@media (min-width: 960px) { ... }

// Large devices (desktop)
@media (min-width: 1264px) { ... }

// Extra large devices (4k and ultra-wides)
@media (min-width: 1904px) { ... }

Material-UI

参照元: Breakpoints - Material-UI

こちらもMaterial Designを実現するためのCSSフレームワーク。

ドキュメントには詳しい説明がないが、「Material DesignのSpecをsimplifiedしたぜ」とのこと。

コード	説明	範囲
xs	extra-small	< 600px
sm	small	< 960px
md	medium	< 1280px
lg	large	< 1920px
xl	extra-large	1920px <=

// Extra Small


// Small devices
@media (min-width: 600px) { ... }

// Medium devices
@media (min-width: 960px) { ... }

// Large devices
@media (min-width: 1280px) { ... }

// Extra large devices
@media (min-width: 1920px) { ... }

Element UI

参照元: Component | Element

こちらもMaterial-UIと同様に、あまり説明はない。
smやmdの値が少し独自な感じ。

コード	説明	範囲
xs	extra small viewports	< 768px
sm	small viewports	< 992px
md	medium viewports	< 1200px
lg	large viewports	< 1920px
xl	extra large viewports	1920px <=

// Extra Small


// Small devices
@media (min-width: 768px) { ... }

// Medium devices
@media (min-width: 992px) { ... }

// Large devices
@media (min-width: 1200px) { ... }

// Extra large devices
@media (min-width: 1920px) { ... }

Tailwind CSS

参照元: Breakpoints - Tailwind CSS

他と比べ、全体的に低めな値が印象的。

コード	説明	範囲
xs	phones	< 640px
sm	tablet	< 768px
md		< 1024px
lg	laptop	< 1280px
xl	desktop	1280px <=

// Extra Small


// Small devices
@media (min-width: 640px) { ... }

// Medium devices
@media (min-width: 768px) { ... }

// Large devices
@media (min-width: 1024px) { ... }

// Extra large devices
@media (min-width: 1280px) { ... }

おわりに

いろんなフレームワークを横串で見ていくといろいろおもしろい。
個別の対応をどこまで考えないといけないかなども見えてくるかも。
実際にBulmaを使ってるけど、xs以下のサイズは、個別でブレイクポイントを設定したりなども。

新しいものを使うときはいろいろ見ないといけない(´ω｀)

こんなのつくってます。

最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
CSSフレームワークにBulmaを使ってます(´ω｀)

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで。