JavaScriptからメディアクエリを判定する

windowオブジェクトのmatchMediaメソッドを利用する. このメソッドはMediaQueryListオブジェクトを返す. このオブジェクトには, matchesというプロパティがあり, それを判定する

if (window.matchMedia('(min-width: 1024px)').matches) {
    //do something ...
}

また, MediaQueryListオブジェクトにはイベントリスナを設定したり, 削除したいすることが可能.

window.matchMedia('(min-width: 1024px)').addListener(function(){
    //対応するメディアクエリが有効になったときに実行される
});

メディアクエリに合致すればリスナに設定した処理が実行される.

レスポンシブデザインには利用場面が多いでしょう.