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 | 适用于电脑屏幕、平板电脑、智能手机等。 |
媒体特性
媒体特性用于根据设备的屏幕尺寸、方向和分辨率等功能应用样式。
媒体特性是可选的，每个媒体特性表达式都必须用括号括起来。
| 值 | 描述 |
|---|---|
| any-hover | 是否有任何可用的输入机制允许用户将鼠标悬停在元素上? |
| any-pointer | 是否有任何可用的输入机制是指针设备?如果是，其精度如何? |
| aspect-ratio | 视口宽度与高度之比 |
| color | 输出设备每个颜色分量的位数 |
| color-gamut | 用户代理和输出设备支持的颜色范围 |
| color-index | 设备可显示的颜色数量 |
| device-posture | 检测设备的当前姿态，即视口是处于平放状态还是折叠状态 |
| display-mode | 应用程序的显示模式:例如，全屏模式或画中画模式 |
| dynamic-range | 用户代理和输出设备支持的亮度、对比度和色深的组合 |
| forced-colors | 检测用户代理是否限制调色板 |
| grid | 设备是网格还是位图 |
| height | 视口高度 |
| hover | 主要输入机制是否允许用户将鼠标悬停在元素上? |
| inverted-colors | 浏览器或底层操作系统是否反转了颜色? |
| monochrome | 单色(灰度)设备上每个"颜色"的位数 |
| orientation | 视口方向(横向或纵向模式) |
| overflow-block | 输出设备如何处理沿块轴溢出视口的内容 |
| overflow-inline | 沿内联轴溢出视口的内容是否可以滚动 |
| pointer | 主要输入机制是否为指点设备?如果是，其精度如何? |
| 偏好配色方案 | 用户偏好浅色配色方案还是深色配色方案? |
| 偏好对比度 | 用户偏好高对比度显示? |
| prefers-reduced-data | 用户是否希望减少数据使用量? |
| prefers-reduced-motion | 用户是否希望减少动态效果? |
| prefers-reduced-transparency | 用户是否希望降低透明度? |
| resolution | 输出设备的分辨率，使用 dpi 或 dpcm 单位 |
| scan | 输出设备的扫描过程 |
| scripting | 是否支持脚本(例如 JavaScript)? |
| shape | 视口是圆形还是矩形? |
| update | 输出设备能够以多快的速度改变内容的外观? |
| video-dynamic-range | 用户代理和输出设备的视频平面所支持的亮度、对比度和色彩深度的组合。 |
| width | 视口宽度 |
