【CSS】メディアクエリの範囲構文について

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

CSSのメディアクエリ範囲構文についてのメモ。

メディアクエリの範囲構文

CSSのメディアクエリの範囲構文では以下のように書くことができます。

768px~992pxの画面幅では背景色が変わります。

<div class="c-box"></div>
.c-box {
    inline-size: 100px;
    block-size: 100px;
    background-color: red;
}
@media (min-width: 768px) and (max-width: 992px) {
    .c-box {
        background-color: orange;
    }
}

上記を以下のようにも比較演算子を書くことができます。意味は同じです。

@media (768px <= width <= 992px) {
    .c-box {
        background-color: orange;
    }
}

以下の記述では画面幅が768px以下のとき適用されます。

@media (width < 768px) {  
    .c-box {
        background-color: green;
    }
}

以下の記述では、画面幅が1200px以上のときに適用されます。

@media (width >= 1200px) {
    .c-box {
        background-color: blue;
    }
}

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧