JavaScript MediaQueryList API

MediaQueryList 对象

MediaQueryList 对象存储来自媒体查询的信息。

MediaQueryList 对象是窗口对象的属性。

MediaQueryList 对象通过以下方式访问：

window.matchMedia() 或仅用 matchMedia()：

实例

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

亲自试一试

另请参阅：

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

亲自试一试

媒体类型

值 描述
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 视口宽度。