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>