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 中添加） |
| update | 输出设备可以修改内容外观的速度有多快？（在媒体查询级别 4 中添加） |
| width | 视窗宽度 |
