SYNCERのロゴ
アイキャッチ画像

MediaQueryList - メディアクエリ

MediaQueryListは、メディアクエリを管理するための機能を備えたインターフェイスです。

概要

名前
MediaQueryList
継承
IDL
[Exposed=Window]
interface MediaQueryList : EventTarget {
  readonly attribute CSSOMString media;
  readonly attribute boolean matches;
  void addListener(EventListener? listener);
  void removeListener(EventListener? listener);
  attribute EventHandler onchange;
};

typedef USVString CSSOMString;

callback interface EventListener {
  void handleEvent(Event event);
};

typedef EventHandlerNonNull? EventHandler;

callback EventHandlerNonNull = any (Event event);
仕様書
https://drafts.csswg.org/cssom-view/#mediaquerylist

チュートリアル

MediaQueryListは、Window.matchMedia()で作成できます。

var mediaQueryList = matchMedia( "(max-width: 250px)" ) ;

このオブジェクトは一言で言えばJavaScript版のメディアクエリです。メディアクエリの条件を満たしている場合はmatchesにtrueが、違うならfalseがセットされます。これは、ユーザーが途中でウィンドウの横幅をリサイズするなど、操作をする度にリアルタイムで反映されます。

mediaQueryList.matches ;	// ウィンドウの横幅が250px以下ならtrue

オブジェクトにはchangeイベントを設定できます。このイベントは、matchesの値が変化すると発生します。次のように処理を実行できます。

mediaQueryList.onchange = function( event ) {
	if ( this.matches ) {
		console.log( "メディアクエリの条件を満たしています!" ) ;
	} else {
		console.log( "メディアクエリの条件を満たしていません!" ) ;
	}
}

コンストラクタ

コンストラクタはありません。

プロパティ

matches

メディアクエリの条件に一致しているか否かを返します。

media

クエリを返します。

メソッド

addListener()

changeイベントを追加します。

removeListener()

changeイベントを削除します。

定数

固有の定数はありません。

イベント

onchange

matchesの値が変化した時に発火します。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
MediaQueryList 6+ 5.1+ 12+ 4.0+
addListener() 6+ 5.1+ 12+ 4.0+
matches 6+ 5.1+ 12+ 4.0+
media 6+ 5.1+ 12+ 4.0+
onchange 39+ 55+××× 26+××
removeListener() 6+ 5.1+ 10+ 12+ 4.0+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月9日 (月)
コンテンツを公開しました。