css – デバイスサイズに応じてCSSを適用する（Media Queries）

PC、スマホ、タブレットなどのデバイスの大きさに応じて、自動的に適用するCSS変えてくれる、レスポンシブデザインな記述方法、Media Queriesです。

Media Queries

さっそくCSSの例文コードを載せます

/* PC、タブレットの時 */
.sample {
  font-size: 16px;
}

/* スマホの時 */
@media screen and (max-width:767px) {
  .sample {
    font-size: 12px;
  }
}

上記は例として、フォントサイズだけの指定になっています。

まず、2～4行目の箇所で.sampleクラスにフォントサイズ16pxが適用されます。
そして次の7～11行目で、スマホのデバイスに対しては12pxにサイスが変更されます。

解説

7行目、

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

ですが、@media screenで画面サイズに応じて、CSSを適用する条件を指定できます。
今回の場合は、(max-width:767px)の箇所が条件ですね。
最大サイズが767pxまでの場合は、条件に合致します。

つまり、画面サイズが

768px以上　→　フォントサイズが16pxになる
767px以下　→　フォントサイズが12pxになる

てな具合です。

デバイスサイズ

 
将来的に新しいデバイスがどんどん登場し、その都度、画面サイズも移り変わっていくと思います。
現状ですと、iOSで以下のようなサイズです。

各サイズに対応させる場合は以下のように記述します。

/* PC用 */
.sample {
  font-size: 16px;
}

/* タブレットの時 */
@media screen and (max-width:1024px) {
  .sample {
    font-size: 12px;
  }
}

/* スマホの時 */
@media screen and (max-width:767px) {
  .sample {
    font-size: 10px;
  }
}