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

 WEBデザイン    478

 

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のグリッドシステムの各ウィンドウ幅での動きと連動して変化します。

スポンサーリンク

コメント

プロフィール

bbb

WEBデザインと輸出入業してます。海外関連、グルメ関連をメインに記事にしています。キュレーションへの投稿、ページのいいねとシェアに喜びます。個人事業の方を応援します!

I'm web designer, and export-import business also. Feel free you can add me on Facebook

 https://www.facebook.com/bbp.jp