MediaQueryList.media - クエリ
mediaは、MediaQueryListのプロパティです。クエリを返します。
概要
- 名前
- media
- 所属
- MediaQueryList
- IDL
readonly attribute CSSOMString media; typedef USVString CSSOMString;
- 仕様書
- https://drafts.csswg.org/cssom-view/#dom-mediaquerylist-media
説明
メディアクエリの条件を文字列で返す。
デモ
MediaQueryList.mediaのデモです。"(max-width: 270px)"というメディアクエリのMediaQueryListを作成しています。ウィンドウの横幅270pxを境に、matchesの値が変化します。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<div id="result"></div>
<script>
var mediaQueryList = matchMedia( "(max-width: 270px)" ) ;
mediaQueryList.onchange = getMediaQueryListInfo ;
function getMediaQueryListInfo() {
document.getElementById( "result" ).textContent = "" ;
appendText( mediaQueryList + "\n" ) ;
appendText( "media: " + mediaQueryList.media + "\n" ) ;
appendText( "matches: " + mediaQueryList.matches + "\n\n" ) ;
if ( mediaQueryList.matches ) {
appendText( "メディアクエリの条件を満たしています。" ) ;
document.body.style.backgroundColor = "#fee" ;
} else {
appendText( "メディアクエリの条件を満たしていません。" ) ;
document.body.style.backgroundColor = "#eef" ;
}
}
function appendText ( text ) {
document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
getMediaQueryListInfo() ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● 6+ | ● 5.1+ | ● | ● | ● 12+ | ● | ● 4.0+ |
関連記事
- MediaQueryList.matches
- matchesは、MediaQueryListのプロパティです。メディアクエリの条件に一致しているか否かを返します。この値は、ユーザーが操作する度にリアルタイムで反映されます。
- MediaQueryList.onchange
- onchangeは、MediaQueryListのイベントです。matchesの値が変化した時にchangeイベントが発生し、ここに設定したコールバック関数が呼び出されます。
- MediaQueryList.addListener()
- addListener()は、MediaQueryListのメソッドです。changeイベントを追加します。
- MediaQueryList.removeListener()
- removeListener()は、MediaQueryListのメソッドです。changeイベントを削除します。