ウィンドウmatchMedia（）
例1
画面/ビューポートの幅が700ピクセルを超えていますか？
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
定義と使用法
このmatchMedia()メソッドは、クエリの結果を含むMediaQueryListを返します。
関連項目：
メディアクエリ
メソッドのメディアクエリは、最小の高さ、最小の幅、向きなど、CSS @ mediaルールmatchMedia()の任意のメディア機能にすることができます
。
例
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
構文
window.matchMedia(mediaQuery)
パラメーター
| Parameter | Description |
| mediaQuery | Required. A string representing a media query. |
戻り値
| タイプ | 説明 |
| オブジェクト | メディアクエリの結果を含むMediaQueryListオブジェクト。 |
例の説明
このページの最初の例では、メディアクエリを実行し、それを現在のウィンドウの状態と比較します。
ウィンドウの状態が変化するたびにレスポンシブメディアクエリを実行するには、MediaQueryListオブジェクトにイベントリスナーを追加します（以下の「その他の例」を参照）。
その他の例
ビューポートの幅が500ピクセル以下の場合は、背景色を黄色に設定し、そうでない場合はピンクに設定します。
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
ブラウザのサポート
matchMedia()最新のすべてのブラウザでサポートされています。
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 11 | Yes | Yes | Yes | Yes |