JavaScriptを使用してメディアクエリを使用する方法

JavaScriptを使用してメディアクエリを実行

メディアクエリはCSS3で導入され、レスポンシブウェブデザインの鍵となる要素の1つです。メディアクエリは、デバイスの幅と高さを決定し、デスクトップ、ラップトップ、タブレット、スマートフォンなどのすべてのデバイスでウェブページがよく表示されるようにします。

window.matchMedia() メソッドはMediaQueryListオブジェクトを返し、指定されたCSSメディアクエリ文字列の結果を表します。matchMedia() メソッドの値は CSS @media のメディア特徴の規則のいずれか、例えば min-height、min-width、方向 など。

インスタンス

ウィンドウの幅が700ピクセル以下の場合、背景色を黄色に変更します。幅が700ピクセル以上の場合、ピンクに変更します：

function myFunction(x) {
  if (x.matches) { // メディアクエリが一致する場合
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// MediaQueryListオブジェクトの作成
var x = window.matchMedia("(max-width: 700px)");
// ランタイムでリスナー関数を呼び出す
myFunction(x);
// 状態変更時にリスナー関数を追加
x.addEventListener("change", function() {
  myFunction(x);
);

自分で試してみる

関連ページ

チュートリアル：CSSメディアクエリ

チュートリアル：レスポンシブウェブデザイン

リファレンスマニュアル：JavaScript window.matchMedia()メソッド