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

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

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

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

調べたのはこの7つ

1. Bluma ... Responsiveness | Bulma
2. Bootstrap ... Overview · Bootstrap
3. Material Design ... Responsive layout grid - Material Design
4. Vuetify ... Breakpoints — Vuetify.js
5. Material-UI ... Breakpoints - Material-UI
6. Element ... Component | Element
7. Twilwind CSS ... Breakpoints - Tailwind CSS

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

Bluma

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

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

// 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のブレイクポイントが一番小さいのが印象的。

// 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

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

// 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と区分けが近いが、少し異なるので注意が必要かも?

// 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したぜ」とのこと。

// 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の値が少し独自な感じ。

// 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

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

// 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) { ... }

おわりに

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

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

こんなのつくってます。

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

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

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