, ,

[HTML & CSS General] レスポンシブ用の Media Queries の単位には「em」を使おう

公開日: 2016/04/25
更新日: 2018/10/15

memo.

em ベースのライブラリ。
SassDoc のドキュメントに対応している。

補足: Debug 用に mq-show-breakpoints を表示させるためのサンプルコード。

sample_sass-mq.scss
$mq-responsive: true;
$mq-breakpoints: (
        mobile:  320px,
        tablet:  740px,
        desktop: 980px,
        wide:    1300px
);
$mq-show-breakpoints: (mobile, tablet, desktop, wide);
html { @include mq-show-breakpoints; }

補遺