JavaScript MediaQueryList API
JavaScript基础 2023-07-30 17:14:13小码哥的IT人生shichen
JavaScript MediaQueryList API
MediaQueryList 对象
MediaQueryList 对象存储来自媒体查询的信息。
MediaQueryList 对象是窗口对象的属性。
MediaQueryList 对象通过以下方式访问：
window.matchMedia() 或仅用 matchMedia()：
示例代码：
const mqlObj = window.matchMedia();
const mqlObj = matchMedia();
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>Window 对象</h1>
<h2>matchMedia() 方法</h2>
<p id="demo"></p>
<script>
let text;
if (window.matchMedia("(max-width: 700px)").matches) {
text = "屏幕宽度小于或等于 700 像素。";
} else {
text = "屏幕至少有 700 像素宽。";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
另请参阅：
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);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>Window 对象</h1>
<h2>matchMedia() 方法</h2>
<p id="demo"></p>
<script>
let text;
if (matchMedia("(max-width: 700px)").matches) {
text = "屏幕宽度小于或等于 700 像素。";
} else {
text = "屏幕至少有 700 像素宽。";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
媒体类型
| 值 | 描述 |
|---|---|
| all | 默认。用于所有媒体类型设备。 |
| 用于打印机。 | |
| screen | 用于电脑屏幕、平板电脑、智能手机等。 |
| speech | 用于大声“阅读”页面的屏幕阅读器。 |
媒体特性
| 值 | 描述 |
|---|---|
| any-hover | 是否有任何可用的输入机制允许用户将鼠标悬停在元素上？ （Media Queries Level 4 中添加）。 |
| any-pointer | 是否有任何可用的输入机制是指点设备，如果是，它的准确度如何？ （Media Queries Level 4 中添加）。 |
| aspect-ratio | 视口的宽高比。 |
| color | 输出设备的每个颜色分量的位数。 |
| color-gamut | 用户代理和输出设备支持的大致颜色范围 （Media Queries Level 4 中添加） |
| color-index | 设备可以显示的颜色数量。 |
| grid | 设备是网格还是位图。 |
| height | 视口高度。 |
| hover | 主要输入机制是否允许用户将鼠标悬停在元素上？ （Media Queries Level 4 中添加） |
| inverted-colors | 浏览器或底层操作系统是否反转颜色？ （Media Queries Level 4 中添加）。 |
| light-level | 当前环境光级别（Media Queries 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 | 输出设备如何处理沿块轴溢出视口的内容（Media Queries Level 4 中添加）。 |
| overflow-inline | 是否可以滚动沿内联轴溢出视口的内容（Media Queries Level 4 中添加）。 |
| pointer | 主要输入机制是指点设备吗？如果是，它的准确度如何？ （Media Queries Level 4 中添加）。 |
| resolution | 输出设备的分辨率，使用 dpi 或 dpcm。 |
| scan | 输出设备的扫描过程。 |
| scripting | 是否可以使用脚本（例如 JavaScript）？（Media Queries Level 4 中添加） |
| update | 输出设备可以多快修改内容的外观（Media Queries Level 4 中添加）。 |
| width | 视口宽度。 |
