Question

我有一个响应式的风格，如下所示：

@media all and (max-width:799px){ 
  .bigFont{ font-size: 28px; }
}

@media all and (min-width:800px){ 
  .bigFont{ font-size: 48px; }
}

如果使用jQuery来改变这样的风格：

$(.bigFont).css("font-size", "30px");

它将改变两种媒体的字体大小。

我的问题是如何使用jQuery更改其中一个的bigFont字体大小？

Answer 1

您需要做的是添加另一个类

@media all and (max-width:799px){ 
  .bigFont{ font-size: 28px; }
  .bigFont30{ font-size: 30px; }
}

@media all and (min-width:800px){ 
  .bigFont{ font-size: 48px; }
}

Jquery的

$(.bigFont).addClass("bigFont30");

这只会更改第一个媒体查询的字体大小

注意：这只有在您知道要设置的字体之前才能使用，否则请进行$(window).width()检查

如何使用jQuery更改响应式样式

1 个答案: