window.matchMedia

最新推荐文章于 2024-10-16 10:27:58 发布

momo（激进版）

最新推荐文章于 2024-10-16 10:27:58 发布

阅读量273

点赞数 3

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_56885551/article/details/140308286

版权

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>