媒体查询和javascript不能很好地结合在一起

Question

我注意到 FF、Chrome 和 Safari 的行为是，如果您干预对象的显示属性，则媒体查询不再对该对象属性起作用。

这样，我已经准备了一个测试html代码，这里是[1]...

你有什么想法不产生这种效果吗？我不认为将 css 媒体查询翻译成 javascript 不符合一般性原则...

简而言之，我想在需要时（如果可能）通过媒体查询和 javascript 更改 DIV 的可见性。

[1]: http://paste.ubuntu.com/1046784/（测试场景）

Answer 1

当您直接更新元素的“样式”时，该样式将覆盖 CSS 中设置的任何内容（除非 CSS 具有 ! important 而本地样式没有）。

为避免该问题，请不要直接操纵元素的样式。相反，添加或删除一个或多个“类”字符串，并在样式表中提供样式（可能受媒体查询影响）。即使您不处理媒体查询，这样做通常也会更好。在 CSS 文件中更新样式内容比在 JavaScript 代码中查找样式更容易。