Help us understand the problem. What is going on with this article?

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

kira_puka
フリーのエンジニア / 今はNuxt.jsが多め / いつかFlutterをやりたい 受託開発をしながら、アプリ・Webサービス・ゲームを個人開発 Kotlin/Python/Swift/Unity/Java/Haskell/DDD
https://memory-lovers.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした