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

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

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

xs sm md lg xl
Bluma < 769 < 1024 < 1216 < 1408 1408
Bootstrap < 576 < 767 < 992 < 1200 1200
MaterialDesign < 600 < 1024 < 1440 < 1920 1920
Vuetify < 600 < 960 < 1264 < 1904 1904
Material-UI < 600 < 960 < 1280 < 1920 1920
Element < 768 < 992 < 1200 < 1920 1920
TwilwindCSS < 640 < 768 < 1024 < 1280 1280

だいたい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に書くときもわかりやすい。が、全体的に狭い範囲で細かい切り替えになっているよう。

コード 説明 範囲
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 handsetLandscape: small handset < 600px
small Portrait: small tabletLandscape: medium handset < 720px
small Portrait: large tabletLandscape: large handset < 840px
small Portrait: large tabletLandscape: 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) { ... }

おわりに

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

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

こんなのつくってます。

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

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

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

Originally published at qiita.com

きらぷか@i18n補助ツール『トランスノート』開発者

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい 仕事依頼やご相談はDMまで Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント