如何将@media应用于通过jquery设置的css属性

Question

我的网站是响应式的，我通过jQuery设置了CSS属性，但是有一个问题，当我使用@media（用于移动显示）时，该属性没有改变，为什么？

HTML code：

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

JQuery代码：

$(".test").css({'margin' : '20px'});

CSS代码：

@media (max-width: 599px){
   .test {margin: 10px;}
}

为什么@media不起作用？它是如何工作的？

应该注意的是，输出始终为margin : 20px（适用于所有@media尺寸）

Answer 1

因为JavaScript和jQuery的进一步扩展在内联中添加了CSS样式，所以它们优先于样式表中应用的任何样式。

使用其他课而不是.css()：

.margin{
  margin: 20px;
}

@media (max-width: 599px){
   .test {margin: 10px;}
}

然后使用jQuery和.addClass()添加该类：

$(".test").addClass('margin');

Answer 2

＆＃13;

＆＃13;

.test {border:1px solid #000}
@media (max-width: 1024px){
   .test {margin: 20px;}
}
@media (max-width: 599px){
   .test {margin: 10px;}
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

因为你试图用css CSS覆盖javascript CSS（用jQuery应用）。 javascript应用的CSS始终优先。

Answer 4

Jquery在元素上应用它的css，它比css中的类更重要...如果你真的需要，你可以在你的媒体查询中添加.test {margin: 10px !important;}。希望这有帮助

Answer 5

您必须指定@media类型，例如：

@media screen and (max-width 768px) {
//Your declaration here
}