matchMedia() 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。

const width = ref();
const myFunction = (x) => {if (x.matches) {// 媒体查询document.body.style.backgroundColor = "yellow";width.value = "yellow";} else {document.body.style.backgroundColor = "pink";width.value = "pink";}width.value = document.body.offsetWidth;
};var x = window.matchMedia("(max-width: 700px)");
myFunction(x); // 执行时调用的监听函数
x.addListener(myFunction); // 状态改变时添加监听器<div>宽度：<div>{width.value}</div>
</div>