ホーム   WEBデザイン   Bootstrap3のグリッドシステムと、CSS3のMedia Queriesを整理する。

 WEBデザイン    1,539

 

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をフォローしよう!

コメント

このエントリーをはてなブックマークに追加

プロフィール

bbb

bbpはWEBデザインと輸出入の仕事をしてます。趣味程度のブログです。キュレーションへの投稿、ページのいいねとシェアに喜びます。