VuetifyとBootstrap4 ～ ブレイクポイント

開発時には、今までフロントエンドフレームワークとして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

_variables.styl

    $grid-breakpoints := {
        xs: 0
        sm: 600px
        md: 960px
        lg: (1280px - 16px)
        xl: (1920px - 16px)
    }

Bootstrap4

_variables.scss

    $grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px
    ) !default;

カスタマイズの詳しいやり方は別の回で書きます。