方法-JavaScriptを使用したメディアクエリ
例
ビューポートの幅が700ピクセル以下の場合は、背景色を黄色に変更します。700より大きい場合は、ピンクに変更します
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
JavaScriptでのメディアクエリの使用
メディアクエリはCSS3で導入され、レスポンシブWebデザインの重要な要素の1つです。メディアクエリは、ビューポートの幅と高さを決定するために使用され、すべてのデバイス(デスクトップ、ラップトップ、タブレット、電話など)でWebページの見栄えを良くします。
window.matchMedia ()メソッドは、指定されたCSSメディアクエリ文字列の結果を表すMediaQueryListオブジェクトを返します。matchMedia()メソッドの値は、最小の高さ、最小の幅、向きなど、CSS @ mediaルールの任意のメディア機能にすることができます。
メディアクエリの詳細については、CSSメディアクエリチュートリアルをご覧ください。
レスポンシブウェブデザインチュートリアルでレスポンシブデザインの詳細をご覧ください
window.matchMedia()メソッドの詳細については、JavaScriptリファレンスをご覧ください。