小码哥的IT人生

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

另请参阅:

window.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);

完整实例:

<!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 默认。用于所有媒体类型设备。
print 用于打印机。
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 视口宽度。

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024