JavaScript 媒体查询与 CSS 媒体查询

Question

我注意到 JavaScript 媒体查询在 CSS 等效查询之后生效。

我创建了一个示例来演示我在说什么：

HTML：

<div class="foo">
  bar
</div>

CSS：

@media(max-width: 300px) {
  .foo {
    background-color: blue;
  }
}

.foo {
  background-color: green;
}

JavaScript：

const w = window.matchMedia("(max-width: 300px)");
const div = document.querySelector(".foo");
function fun(e) {
  if (e.matches) {
     div.style.backgroundColor = "red"
  } else {
     div.style.backgroundColor = "green"
  }
}


w.addListener(fun);

jsbin链接是：这里

当屏幕宽度小于或等于 300 像素时，红色背景颜色会覆盖蓝色（使用 CSS 媒体查询设置）。

我认为这是一件好事。 但我不确定，这是标准的良好支持行为吗？ 基于这种行为构建逻辑是否安全？

Answer 1

这是CSS 特异性的一部分

内联 styles添加到元素（例如style="font-weight: bold;" ）总是覆盖外部样式表中的任何 styles，因此可以被认为具有最高的特异性。

您发布的 javascript 代码将添加内联 styles （通过元素的style属性），因此具有最高的特异性。 （它与 js 媒体查询无关，它只与您如何将 JS 中的样式应用于元素有关）