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

我有一个响应式的风格，像这样：

@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()检查