JavaScript媒体查询与CSS媒体查询

Question

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

我创建了两个示例，演示了我所讲的内容：

第一个例子

HTML：

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

CSS：

.foo {
  background-color: orange;
}


@media(max-width: 300px) {
  .foo {
    background-color: blue;
    transform: translateY(100px);
    transition: all 300ms ease-out;
  }
}

jsbin链接是：这里

在这里，当屏幕宽度从更大的东西变成300 or或更少时，就会发生转换。

但是，当创建响应性设计时，这样的转换可能会很烦人。我在试着摆脱他们。下面的Javascript和CSS解决了这个问题，但我不确定它是否可靠。

第二例

HTML

<div class="foo">
  bar
</div>
<button>toggle translateY to 200px</button>

CSS

.transition {
  transition: all 300ms ease-out;
}

.foo {
  background-color: orange;
}


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

.translateY {
  transform: translateY(200px);
}

JavaScript：

const w = window.matchMedia("(max-width: 300px)");
const div = document.querySelector(".foo");
const button = document.querySelector('button');

function fun(e) {
  if (e.matches) {
     div.classList.add('transition');
  } else {
     div.classList.remove('transition');
  }
}

// for initial screen width change detection
fun(w);

w.addEventListener('change', fun);

button.onclick = function() {
  div.classList.toggle('translateY');
}

jsbin链接是这里

在这里，当屏幕宽度从更大的东西变成300 or或更少时，似乎会发生以下事情：

1. CSS transform: translateY(100px)是在闪存中呈现的。
2. transition类由JavaScript添加到div中。

通过单击该按钮，可以确保transition类正常工作。

此示例不会导致任何不必要的转换，因为屏幕大小从更大的东西变成300 or或更少。

因此，似乎在JavaScript等效的媒体查询之前呈现任何CSS媒体查询。我觉得这是件好事。但我不确定，这是否是标准的得到支持的行为？基于这种行为构建逻辑安全吗？

Answer 1

这是CSS特异性的一部分

添加到元素(例如，)中的内联样式总是覆盖外部样式表中的任何样式，因此可以认为具有最高的特性。

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

在所讨论的注释/更新后更新

同样，它取决于何时加载CSS和JS。如果您首先包含CSS文件，因为它是一个呈现阻塞资源，那么它将首先应用。

我不确定，为什么不通过CSS媒体查询应用所有的规则呢？

​

const div = document.querySelector(".foo");
const button = document.querySelector('button');

button.onclick = function() {
  div.classList.toggle('translateY');
}

.foo {
  background-color: orange;
}

@media(max-width: 300px) {
  .foo {
    background-color: blue;
    transform: translateY(100px);
    transition: all 300ms ease-out;
  }
}

.translateY {
  transform: translateY(200px);
}

<div class="foo">
  bar
</div>
<button>toggle translateY to 200px</button>

​