Edited at

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

いま開発している積読用の読書管理アプリでは、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つ


  1. Bulma ... 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. 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)まで。