CSS メディアクエリの書き方（レスポンシブ対応）

2019年5月17日2021年1月2日

皆さんは、レスポンシブ対応の時、メディアクエリをどのように設定されていますか？
そもそもメディアクエリとは何から解説して行きます。

メディアクエリとは

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

上記のような記述を見たことはないでしょうか？
上記の記述がメディアクエリと言われています。上記の「{ }」に囲まれている範囲のCSSは
下記の条件の場合、適用されます。
　条件：画面の幅が600px以上
つまりWindowの幅が600px以上の時に適用したいCSSを「{ }」に記述することになります。

どういった時に使うの？

さて上記はどういった時に使うのかと言いますと、タイトルにもあるレスポンシブ対応の際に利用します。
PC版は、メディアクエリを記述せずに、記入
SP版は、メディアクエリ内に記入
例：

/* PC */
body{ **** }
img{ **** }
@media screen and (min-width:600px){
    body{ **** }
    img{ **** }
}

補足情報
上記の「screen」ですが、他にも下記のような種類もあります。

• screen（ディスプレイ）
• print（プリンタ）
• tv（テレビ）
• projection（プロジェクター）
• all（すべて）

状況に応じて使い分けをしていきます。

デバイス別画面のサイズ(2019年)