JavaScript Anywhere,javascript案例代码,Javascript Alert,Javascript API,JAVAscript按钮条件满足变色
JavaScript API MediaQueryList 是一个用于检查文档的媒体查询状态的接口。它允许开发者动态地监测视窗尺寸、设备方向或者其他媒体相关的属性。当这些属性匹配指定的CSS media query时，会触发回调函数执行。

例如，在以下代码中，我们创建了一个 MediaQueryList 对象来检测当前视口是否小于等于 768px：

javascript
const mql = window.matchMedia("(max-width: 768px)");

function handleMediaChange(event) {
if (event.matches) {
/* 视口宽度小于等于 768px */
} else {
/* 视口宽度大于 768px */
}
}

mql.addListener(handleMediaChange); // 注册监听器

/* 初始化时执行一次 */
handleMediaChange(mql);


在上面的例子中，我们使用 window.matchMedia() 方法创建一个 MediaQueryList 对象，并传入一个 CSS media query 字符串 (max-width: 768px)。然后，我们将一个名为 handleMediaChange 的回调函数注册到对象中，该回调函数在媒体查询状态改变时被触发执行。

最后，我们通过调用回调函数并传入 mql 作为参数来初始化 MediaQueryList 对象的状态。这样，我们就可以根据当前窗口的大小来执行相应的逻辑。

除了 addListener() 方法外，MediaQueryList 接口还提供了其他方法和属性，例如 matches 属性、removeListener() 方法等，可以根据实际需求灵活使用。