ブラウザの幅に合わせてスタイルを変更する方法

メディアクエリを使ってみました。 Ardor(@ArdorOnline)です。 ブラウザの幅に合わせてスタイルを切り替えられませんか？ と、質問があって調べていたのですが、メディアクエリが使えそうです。 ブラウザの幅に合わせてスタイルを変更する方法をご紹介します。

メディアクエリ

メディアクエリは、次の形式でメディアタイプに合わせて指定が可能です。

@media メディアタイプ { 設定 }

@media メディアタイプ and ( 特性 ) { 設定 }

メディアタイプには、all、screen、print、handheld、projection、tv、tty、braille、embossed、speech が指定可能です。 今回は、ブラウザ画面に合わせて変更したいので、「screen」を利用します。

スタイルシートの記述

画面に合わせてスタイルを変更する方法です。
今回は次の範囲でスタイルを変更してみたいと思います。

ブラウザ幅1000px以上の時：blue
ブラウザ幅501px以上 999px以下の時：yellow
ブラウザ幅500px以下の時：pink

記述は、次の通りです。

@media screen and (min-width: 1000px) {
 .media-sample {
  background-color: blue;
 }
}
@media screen and (min-width: 501px) and (max-width: 999px) {
 .media-sample {
  background-color: yellow;
 }
}
@media screen and (max-width: 500px) {
 .media-sample {
  background-color: pink;
 }
}

@media screen and (min-width: 1000px)で、1000px以上の場合を表現しています。 また括弧内を変更して、さらに and で条件を増やすと範囲条件が指定可能になります。

サンプル

ブラウザ幅に合わせて色が変わります。
お使いのブラウザの横幅を変更してみてください。

SAMPLE

最後に

いかがでしたでしょうか？ 色が変わるのが確認できましたか？
スマートフォンの縦状態、横状態も判定してスタイルを変更することもできるみたいなので、後日記事にします。

最後までお読み頂きありがとうございます。