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

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