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で以下のようなサイズです。

デバイス 横画面で見るブラウザの幅 縦画面で見るブラウザの幅
iPad 1024px 768px
iPhone X/8/7/6 Plus 736px 480px
iPhone X/8/7/6 667px 375px
iPhone 5/SE 568px 320px
iPhone 4 480px 320px

 

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

/* 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;
  }
}

2 件のコメント

  1. mobkin 投稿者返信

    >マックスさん
    普段なにげなく見ているネットですが、こうした工夫が随所にあるんだと痛感します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です