MediaQueryList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

實驗性質: 這是一個實驗中的功能
此功能在某些瀏覽器尚在開發中,請參考兼容表格以得到不同瀏覽器用的前輟。

MediaQueryList 物件維護一組針對 documentmedia querie , 並且當 media querie 相對應的文件狀態改變時,觸發註冊的事件處理器通知之。

MediaQueryList 物件讓我們不用一直定期去偵測,而是直接去觀察文件的狀態變化。

Method overview

void addListener(MediaQueryListListener listener);
void removeListener(MediaQueryListListener listener);

Properties

Property Type Description
matches boolean truedocument 目前狀態符合 media query list 所維護的條件; 否則 false。 唯獨**。**
media DOMString 序列化 (serialized) 的 media query list.

Methods

addListener()

添加一個新的事件處理器 (listener),若 listener 已存在則無作用。

void addListener(
  MediaQueryListListener listener
);

Parameter (for addListener method)

listener

當 media query 對應的狀態改變時所觸發的事件處理函數 (MediaQueryListListener)。

removeListener()

移除一個事件處理器 (listener),若 listener 不存在則無作用。

void removeListener(
  MediaQueryListListener listener
);

Parameter (for removeListener method)

listener

欲移除的事件處理函數 (MediaQueryListListener)。

規範

Specification
CSSOM View Module
# the-mediaquerylist-interface

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaQueryList
MediaQueryList inherits EventTarget
addListener()
Deprecated
change event
matches
media
removeListener()
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.

參見