今回はBootstrapでメディアクエリを設定する方法について紹介します。
Bootstrap内でのメディアクエリ
Bootstrapでは主にグリッドシステムでメディアクエリが使われています。
Bootstrapではモバイルファーストを意識されているので、
次のように画面幅の狭いデバイスから順にメディアクエリが設定されています。
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
768px未満ではメディアクエリを指定せず、768px以上はそれぞれのブレイクポイントに応じてメディアクエリが設定され、スタイルが上書きされていくイメージです。
ブレイクポイントの初期値は以下のとおりです。
| スマートフォン | タブレット | デスクトップ(中) | デスクトップ(大) | |
|---|---|---|---|---|
| ブレイクポイント | 768px未満 | 768px以上 | 992px以上 | 1200px以上 |
メディアクエリの指定方法
自分でメディアクエリを設定する場合は、公式サイトにあるようにデバイスごとにメディアクエリを指定するのがスマートでオススメです。
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
先ほど紹介したBootstrapのルールに則って、モバイルファーストでの指定方法を採用してもいいですが、
CSSが冗長になりやすく、ライブラリとの一貫性はあっても、実は自分で用意するメディアクエリにはあまり関係がないので、
好きなほうを選んでもらって構わないと思います。
これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装〈Bootstrap・コンテンツファースト・コンポーネント設計〉
posted with ヨメレバ
松田直樹,後藤賢司,こもりまさあき エムディエヌコーポレーション 2015-03-23