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

MediaQueryList インターフェイス

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

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

MediaQueryList 表示サイス幅が 500px 以下であるか
var obj_MediaQueryList = matchMedia('(max-width:500px)');

詳しくは Example を参照してください

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

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

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

ページ内 Index

- ad -

プロパティ(Properties)

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

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

メソッド(Methods)

 MediaQueryList インターフェイスに独自のメソッドはないです。

イベント(Event)

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

Example onchange による条件分岐

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

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

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

- ad -

Example 複数の条件分岐

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

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

- ad -