Bootstrapを使う前にメディアクエリの指定方法を覚えておこう

スポンサーリンク

今回は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制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。