MediaQueryList API
MediaQueryList 对象
MediaQueryList 对象存储来自媒体查询的信息。
MediaQueryList 对象是 window 对象的一个属性。
通过以下方式访问 MediaQueryList 对象：
window.matchMedia() 或仅 matchMedia()
MediaQueryList 属性
| 属性 | 描述 |
|---|---|
| matches | 布尔值。 如果文档与查询匹配，则为 true，否则为 false。 |
| media | 字符串。 媒体查询（列表）。 |
MediaQueryList 方法
| 方法 | 描述 |
|---|---|
| addListener() | 添加一个新的监听器函数，每当媒体查询的评估结果改变时就会执行该函数。 |
| removeListener() | 从媒体查询列表中移除先前添加的监听器函数。如果指定的监听器不在列表中，则不执行任何操作。 |
媒体查询
matchMedia() 方法的媒体查询可以是 CSS @media 规则 的任何媒体特性，例如 min-height、min-width、orientation 等。
示例
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
媒体类型
| 值 | 描述 |
|---|---|
| all | 默认。用于所有媒体类型设备 |
| 打印 | 用于打印机 |
| screen | 用于电脑屏幕、平板电脑、智能手机等。 |
| speech | 用于“朗读”页面的屏幕阅读器 |
媒体特性
| 值 | 描述 |
|---|---|
| any-hover | 是否有任何可用的输入机制允许用户悬停在元素上？（在媒体查询级别 4 中添加） |
| any-pointer | 是否有任何可用的输入机制是指针设备？如果是，其准确性如何？（在媒体查询级别 4 中添加） |
| aspect-ratio | 视口宽度与高度之比 |
| color | 输出设备每个颜色分量的位数 |
| color-gamut | 用户代理和输出设备支持的大致颜色范围（在媒体查询级别 4 中添加） |
| color-index | 设备可以显示的颜色数量 |
| grid | 设备是网格还是位图 |
| height | 视口高度 |
| hover | 主要输入机制是否允许用户悬停在元素上？（在媒体查询级别 4 中添加） |
| inverted-colors | 浏览器或底层操作系统是否正在反转颜色？（在媒体查询级别 4 中添加） |
| light-level | 当前环境光照水平（在媒体查询级别 4 中添加） |
| max-aspect-ratio | 显示区域的宽度与高度的最大比率 |
| max-color | 输出设备每个颜色分量的最大位数 |
| max-color-index | 设备可以显示的最大颜色数量 |
| max-height | 显示区域（例如浏览器窗口）的最大高度 |
| max-monochrome | 单色（灰度）设备上每个“颜色”的最大位数 |
| max-resolution | 设备的最高分辨率，使用 dpi 或 dpcm |
| max-width | 显示区域（例如浏览器窗口）的最大宽度 |
| min-aspect-ratio | 显示区域的宽度与高度的最小比率 |
| min-color | 输出设备每个颜色分量的最小位数 |
| min-color-index | 设备可以显示的最小颜色数量 |
| min-height | 显示区域（例如浏览器窗口）的最小高度 |
| min-monochrome | 单色（灰度）设备上每个“颜色”的最小位数 |
| min-resolution | 设备的最低分辨率，使用 dpi 或 dpcm |
| min-width | 显示区域（例如浏览器窗口）的最小宽度 |
| monochrome | 单色（灰度）设备上每个“颜色”的位数 |
| orientation | 视口的方向（横向或纵向模式） |
| overflow-block | 输出设备如何处理沿块轴溢出视口的内容（在媒体查询级别 4 中添加） |
| overflow-inline | 沿内联轴溢出视口的内容是否可滚动（在媒体查询级别 4 中添加） |
| pointer | 主要输入机制是否是指针设备？如果是，其准确性如何？（在媒体查询级别 4 中添加） |
| resolution | 输出设备的分辨率，使用 dpi 或 dpcm |
| scan | 输出设备的扫描过程 |
| scripting | 脚本（例如 JavaScript）是否可用？（在媒体查询级别 4 中添加） |
| 更新 | 输出设备修改内容外观的速度如何（在媒体查询级别 4 中添加） |
| width | 视口宽度 |
