MediaQueryList インターフェイス
MediaQueryList インターフェイスは、メディアデバイスへの問い合わせ(クエリー)する方法が定義されたインターフェイスです。
メディアデバイスとは、表示画面やプリンターといったデバイスのことです。これらメディアデバイスの表示サイズなどをクエリーによって確認、条件分岐に利用できます。
CSS における @media や @import といったメディアクエリが似ています。
MediaQueryList オブジェクトは Window.matchMedia('条件') によって取得します。
このインターフェイスは EventTarget インターフェイスを継承していおり、そのプロパティとメソッドを継承しています。
イベントハンドラーとして onchage が用意されていますが、条件分岐としては1つのみしか反応しません(詳しくはExampleを参照)。
複数の条件分岐を行うには、Example 複数の条件分岐
を参照してください。
- ad -
プロパティ(Properties)
MediaQueryList インターフェイスは EventTarget インターフェイスを継承していおり、そのプロパティを継承しています。
Property | 概要 |
---|---|
matches | documentからメディアデバイスへのクエリが通るか/否かを Boolean 型で返す |
media |
メソッド(Methods)
MediaQueryList インターフェイスに独自のメソッドはないです。
イベント(Event)
イベントハンドラー | 概要 |
---|---|
onchange | MediaQueryList オブジェクトに変化があったら |
Example onchange による条件分岐
Window.matchMedia('条件') によって条件分岐をする方法に、onchange
イベントハンドラーを利用する方法があります。
しかし、この方法だと複数の条件分岐はできません。
以下は複数の Window.matchMedia('条件') を定義していますが、1つしか反応しません。このような方法での複数の条件分岐はできません。
複数の条件分岐を行うには、Example 複数の条件分岐
を参照してください。
- ad -
Example 複数の条件分岐
Window.matchMedia('条件') を利用して複数の条件分岐を作成するには、 onresize イベントハンドラーで都度この Window.matchMedia('条件') メソッドを呼び出す方法を使います。
- ad -