Sassのメディアクエリmixinの決定版ライブラリ「Sass MQ」 ｜ Tips Note by TAM
以前、Sassの変数（Map）とmixinでメディアクエリを管理する記事を書きました。 Sassの変数とmixinで変更に強いメディアクエリをつくる 単純なmixinで導入はしやすいですが、min-widthとmax-widthのどちらも使いたい場合は変数とmixinを増やす必要があったり、@media (min-width: 768px) and (max-width: 1023px)のような条件には対応していませんでした。 「Sass MQ」はこれらの機能を備えている高機能で軽量なライブラリです。 「inuitcss」で採用されていたり、「Sass Guidelines」で紹介されていたりしています。GitHubで1578のスターも付けられています（記事執筆時点）。 Sass MQをインストールする npm・yarn・Bowerからインストールできます。 bower install s
デバイスに合わせてCSSを振り分ける「Media Queries」 | DevelopersIO
Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えること出来るようになる仕様です。 今までもCSS2のMedia typesを使い、screenやprintなど大まかなメディア用スタイルを設定することはできました。ですが、それでけでは昨今のスマートフォン、タブレット端末事情にはとても対応できません。JavaScriptで対応する方法もありますがシンプルではありません。そこで、CSS3だけで振り分けが可能になるのがMedia Queriesという仕様です。 Media Queries Media Queriesはユーザーの端末、スクリーンサイズをもとに適したスタイルシートを適用することができます。Media Queriesを利用することで、PC用スタイルシート、タブレット用スタイルシート、スマートフォン用スタイルシートと個別にスタイルを指定することができ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Timothy Hatcherさんのツイート: "This media query is internal only currently. We are considering a public proposal.… "
