開発時には、今までフロントエンドフレームワークとしてBootstrap4をメインとして使ってきていましたが、フロントエンドにVue.jsを取り入れることになり、それならばと、Vuetifyを使ってみることにしました。
この記事では何回かに分けて、Bootstrap4 と Vuetify の違いを検証していきます。
今回は、それぞれのブレイクポイントを見てみましょう。
ブレイクポイント
Vuetify
xs: 0, // 0px ~ 599px
sm: 600px, // 600px ~ 959px
md: 960px, // 960px ~ 1263px
lg: 1264px, // 1264px ~ 1903px
xl: 1904px // 1904px ~
Bootstrap4
(xs): 0, // 0px ~ 575px
sm: 576px, // 576px ~ 767px
md: 768px, // 768px ~ 991px
lg: 992px, // 992px ~ 1199px
xl: 1200px // 1200px ~
ついでに、Bootstrap3 も。
Bootstrap3
xs: 0, // 0px ~ 767px
sm: 768px, // 768px ~ 991px
md: 992px, // 992px ~ 1199px
lg: 1200px // 1200px ~
768pxというサイズは、iPadを縦持ちした時のサイズなのですが、Bootstrap3までは、それ以下をすべてスマートフォンとして一括りになっていました。
Bootstrap4になって、0 ～ 768px の間に576px という新たなブレークポイントが追加され、スマートフォンの横持ちやファブレットなどの小型タブレットで分けることもできるようになりました。
Bootstrap3からBootstrap4へ移行する際に気を付けないといけないポイントですね。
また、Bootstrap4になって、xsという表記がなくなりました。
Vuetifyのほうは、smのブレイクポイントは600pxとなりBootstrap4のsmとほぼ一緒です。ただ、mdのブレイクポイントは960pxとなってますので、範囲が 600px ~ 959px となり、スマートフォンの横持ちや小型タブレットも全てタブレットに含む扱いとなっています。
そして、Vuetifyだけの特徴として、xl: 1904px があり、4kやウルトラワイドモニターに対応しています。
Vuetifyは、マテリアルデザインを取り入れていますので、マテリアルデザイン公式サイトのガイダンスに従って構築されています。
「MATERIAL DESIGN」
https://material.io/design/layout/responsive-layout-grid.html#breakpoints
カスタマイズ
Vuetifyでは、Stylus、Bootstrap4では、SASSを使って、このブレイクポイントをカスタマイズすることができます。
Vuetify
$grid-breakpoints := {
xs: 0
sm: 600px
md: 960px
lg: (1280px - 16px)
xl: (1920px - 16px)
}
Bootstrap4
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
カスタマイズの詳しいやり方は別の回で書きます。