メディアクエリーを使用すると、デバイスの種類、幅、高さ、向き、解像度などの様々な条件に合わせたcssの変更が可能です。

max-width

表示領域の最大幅。この横幅以下の場合にのみ適用されます。

800px以下の場合

    @media screen and (max-width: 800px) {
    }

min-width

表示領域の最小幅。この横幅以上の場合にのみ適用されます。

600px以上の場合

    @media screen and (min-width: 600px) {
    }

andで最大幅と最小幅を指定

andを使って最大幅と最小幅を両方指定することもできます。
800px以下~600px以上の場合

    @media screen and (max-width: 800px) and (min-width: 600px) {

  }

一般的なメディアクエリーの指定方法

スマホ用から記述する場合

    @media screen and (min-width:480px){} //480px以降(スマホ縦~PC)
    @media screen and (min-width:768px){} //768px以降(タブレット~PC)
    @media screen and (min-width:1024px){} //1024px以降(PC)

パソコン用から記述する場合

    @media screen and (max-width: 979px) {}
    @media screen and (max-width: 767px) {}
    @media screen and (max-width: 479px) {}

最後に

今更メディアクエリーという感じですが、レスポンシブデザインの基本中の基本なので、ちゃんと身につけておきたいですね。

次の記事 前の記事