備忘録的プログラミングリファレンス

MediaQueryList インターフェイス

Window.matchMedia()

 MediaQueryList インターフェイスは、メディアデバイスへの問い合わせ(クエリー)する方法が定義されたインターフェイスです。

 メディアデバイスとは、表示画面やプリンターといったデバイスのことです。これらメディアデバイスの表示サイズなどをクエリーによって確認、条件分岐に利用できます。
  CSS における @media や @import といったメディアクエリが似ています。

MediaQueryList 表示サイス幅が 500px 以下であるか
var obj_MediaQueryList = matchMedia('(max-width:500px)');
詳しくはExampleを参照してください

 MediaQueryList オブジェクトは Window.matchMedia('条件') によって取得します。

 このインターフェイスは EventTarget インターフェイスを継承していおり、そのプロパティとメソッドを継承しています。

 イベントハンドラーとして onchage が用意されていますが、条件分岐としては1つのみしか反応しません(詳しくはExampleを参照)。
 複数の条件分岐を行うには、Example 複数の条件分岐を参照してください。

プロパティ(Properties)

 MediaQueryList インターフェイスは EventTarget インターフェイスを継承していおり、そのプロパティを継承しています。

Property概要
matchesdocumentからメディアデバイスへのクエリが通るか/否かを Boolean 型で返す
media

イベント、イベントハンドラー

イベントハンドラー概要
onchange MediaQueryList オブジェクトに変化があったら

Example onchange による条件分岐

 Window.matchMedia('条件') によって条件分岐をする方法に、onchange イベントハンドラーを利用する方法があります。 しかし、この方法だと複数の条件分岐はできません。

 以下は複数の Window.matchMedia('条件') を定義していますが、1つしか反応しません。このような方法での複数の条件分岐はできません。
 複数の条件分岐を行うには、Example 複数の条件分岐を参照してください。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

Example 複数の条件分岐

 Window.matchMedia('条件') を利用して複数の条件分岐を作成するには、 onresize イベントハンドラーで都度この Window.matchMedia('条件') メソッドを呼び出す方法を使います。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。