WEB制作(html・css(スタイルシート))に関する各種メモ書き

Bootstrapのメディアクエリ

Bootstrapを使用しているサイトでメディアクエリを追加する場合の記述は以下のようになります。

Bootstrapはモバイルファースト志向なので、まずモバイルのCSSを設定して、次のメディアクエリでウィンドウ幅が広いタブレットやPCの時のCSSを上書きしていくというように設定します。

@media (min-width: 768px) {
    #test {
    }
}
@media (min-width: 992px) {
    #test {
    }
}
@media (min-width: 1200px) {
    #test {
    }
}

逆にスマホのみに指定したい場合は以下のように記述します。

/* PC(幅1199px)以下に適用するスタイル */
@media (max-width: 1199px) {
    #test {
    }
}

/* タブレット以下に適用するスタイル */
@media (max-width: 991px) {
    #test {
    }
}

/* スマホのみ適用するスタイル */
@media (max-width: 767px) {
    #test {
    }
}

関連エントリー

No.990
01/19 23:06

edit

Bootstrap