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

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

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

|      | xs | sm | md | lg | xl |
| --- | --- | --- | --- | --- | --- |
| Bulma               | < 769 | < 1024 | < 1216 | < 1408 | 1408 <= |
| Bootstrap           | < 576 | <  767 | <  992 | < 1200 | 1200 <= |
| Material<br/>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<br/>CSS    | < 640 | <  768 | < 1024 | < 1280 | 1280 <= |

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

## 調べたのはこの7つ

1. Bulma ... [Responsiveness | Bulma](https://bulma.io/documentation/overview/responsiveness/)
1. Bootstrap ... [Overview · Bootstrap](https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints)
1. Material Design ... [Responsive layout grid - Material Design](https://material.io/design/layout/responsive-layout-grid.html#breakpoints)
1. Vuetify ... [Breakpoints — Vuetify.js](https://vuetifyjs.com/ja/customization/breakpoints)
1. Material-UI ... [Breakpoints - Material-UI](https://material-ui.com/customization/breakpoints/#breakpoints)
1. Element ... [Component | Element](https://element.eleme.io/#/en-US/component/layout#responsive-layout)
1. Tailwind CSS ... [Breakpoints - Tailwind CSS](https://tailwindcss.com/docs/breakpoints/#app)

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

### Bulma

参照元: [Responsiveness | Bulma: Free, open source, & modern CSS framework based on Flexbox](https://bulma.io/documentation/overview/responsiveness/)

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

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


```css
// 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](https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints)

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

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

```css
// 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](https://material.io/design/layout/responsive-layout-grid.html#breakpoints)

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

| コード | 説明 | 範囲 |
| --- | --- | --- |
|  xsmall | Portrait: small handset | < 360px |
|  xsmall | Portrait: medium handset | < 400px |
|  xsmall | Portrait: large  handset | < 480px |
|  xsmall | Portrait: large handset<br/>Landscape: small handset | < 600px |
|  small | Portrait: small tablet<br/>Landscape: medium handset | < 720px |
|  small | Portrait: large tablet<br/>Landscape: large handset | < 840px |
|  small | Portrait: large tablet<br/>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 <= |

```css
// 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](https://vuetifyjs.com/ja/customization/breakpoints)

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

```css
// 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](https://material-ui.com/customization/breakpoints/#breakpoints)

こちらもMaterial Designを実現するためのCSSフレームワーク。  
ドキュメントには詳しい説明がないが、「Material DesignのSpecをsimplifiedしたぜ」とのこと。

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


```css
// 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](https://element.eleme.io/#/en-US/component/layout#responsive-layout)

こちらも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 <= |


```css
// 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](https://tailwindcss.com/docs/breakpoints/#app)

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

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

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

## おわりに

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

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

## こんなのつくってます。

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="25%"/>

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

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