小编Nat*_*eth的帖子

我注意到 css 媒体查询定义和 javascript window.matchMedia 媒体查询定义之间的区别：

css 规则最初应用于加载的页面。

javascript 中定义的规则不会在页面加载后执行，而只会在输入新条件后执行。

一个例子：

我有两个具有等效媒体查询定义的不同页面，第一个在 css 中定义，第二个在 javascript 中定义：

css 版本（在样式元素中定义）：

@media (min-width: 401px) and (max-width: 600px) { body {background-color: red; } }
@media (min-width: 601px) and (max-width: 800px) { body {background-color: blue; } }

javascript 版本（在全局或在主体加载后调用的函数中定义）：

window.matchMedia("(min-width: 401px) and (max-width: 600px)")
.addListener(function(e) {
  if (e.matches) {
    document.body.style.background = "red";
  }
});

window.matchMedia("(min-width: 601px) and (max-width: 800px)")
.addListener(function(e) {
  if (e.matches) {
    document.body.style.background = "blue";
  }
});

当我加载页面并且窗口宽度为 700 像素时

• css版本页面是蓝色的
• javascript 版本是白色的，只有在满足新条件后才会更改其状态，即窗口大小低于 …