Bootstrap3のグリッドシステムと、CSS3のMedia Queriesを整理する。

Bootstrap（ブートストラップ）のグリッドシステムはブラウザのウィンドウの幅に応じて12分割されたカラムを調整できる便利な機能です。

レスポンシブでWEBサイトを制作するのに今や必須のグリッドシステムですが、Bootstrap3のデフォルトのブレイクポイントとCSS3のMedia Queries（メディアクエリ）の情報を整理して紹介しておきます。

Bootstrap3のクラス、ウィンドウサイズ、CSSの書き方一覧

class	col-xs-	col-sm-	col-md-	col-lg-
width	〜767px	768px〜991px	992px〜1199px	1200px〜
CSS	@media screen and (max-width: 767px) { }	@media screen and (max-width: 991px) { }	@media screen and (max-width: 1199px) { }	指定なし

上位の行から読み込まれますので、CSSを上から

/* col-lg- 1200px以上はそのまま */

/* col-md- 1199px以下 */
@media screen
    and (max-width: 1199px) {
}

/* col-sm- 991px 以下 */
@media screen
    and (max-width: 991px) {
}

/* col-xs- 767px 以下 */
@media screen
    and (max-width: 767px) {
}

のように記述していけば、Bootstrap3のグリッドシステムの各ウィンドウ幅での動きと連動して変化します。

Twitter でbbpをフォローしよう！

Follow @https_bbp_jp