window.matchMedia

Window 接口的 matchMedia() 方法返回一个新 MediaQueryList 对象，用于确定是否与媒体查询字符串匹配，以及监视文档以检测它何时匹配（或停止匹配）该媒体查询。

matchMedia() 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。

matchMedia() 方法的值可以是任何一个 CSS @media 规则 的特性, 如 min-height, min-width, orientation 等。

用法

matchMedia(mediaQueryString)

参数

• mediaQueryString 必需，一个字符串，指定要解析为 MediaQueryList 的媒体查询的字符串。

MediaQueryList 对象有以下两个属性：

1. media ：查询语句的内容。
2. matches ：用于检测查询结果，如果文档匹配 media query 列表，值为 true，否则为 false。

MediaQueryList 对象还可以监听事件。通过监听，在查询结果发生变化时，就调用指定的回调函数。

• addListener(functionref) 添加一个新的监听器函数，该函数在媒体查询的结果发生变化时执行。
• removeListener(functionref) 从媒体查询列表中删除之前添加的监听器。如果指定的监听器不在列表中，则不执行任何操作。