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 物件維護一組針對 document 的 media querie , 並且當 media querie 相對應的文件狀態改變時，觸發註冊的事件處理器通知之。

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

Method overview

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

Properties

Property Type Description
matches boolean true 當 document 目前狀態符合 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

瀏覽器相容性

BCD tables only load in the browser

參見