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

memo.

[markdown]
> * [[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要 | コリス](http://coliss.com/articles/build-websites/operation/css/media-query-units.html)

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

> * [sass-mq/sass-mq: A Sass mixin that helps you compose media queries in an elegant way.](https://github.com/sass-mq/sass-mq)

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

“`scss: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; }
“`

## 補遺

> * [メディアクエリの利用 – CSS | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries)
> * [CSS メディア クエリを使用してレスポンシブにする | Web Fundamentals – Google Developers](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=ja)
[/markdown]