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

【问题标题】：How to change responsive style using jQuery如何使用 jQuery 更改响应式样式
【发布时间】：2012-12-28 19:39:07
【问题描述】：

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

@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 的字体大小？

【问题讨论】：

它并没有真正改变这两种媒体。它只是将其设置为选择器元素的内联 CSS。由于这是内联的，因此它反映了所有宽度。在您的情况下，您可能应该考虑在窗口宽度上使用 if 条件，然后设置它。

标签： jquery css

【解决方案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() 检查

【讨论】：