如何使用jQuery更改响应样式 [英] How to change responsive style using jQuery

问题描述

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

  @media all和（max-width：799px）{
 .bigFont {font-size：28px; } 
} 
 
 @media all和（min-width：800px）{
 .bigFont {font-size：48px; } 
} 
  

如果使用jQuery来改变样式：

  $（。bigFont）.css（font-size，30px）; 
  

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

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

解决方案

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

  @media all和（max-width：799px）{
 .bigFont {font-size：28px; } 
 .bigFont30 {font-size：30px; } 
} 
 
 @media all和（min-width：800px）{
 .bigFont {font-size：48px; } 
} 
  

Jquery

  $（。bigFont）.addClass（bigFont30）; 
  

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

注意：这将只有当你知道你想要设置的字体之前，否则放置 $（window）.width（） >

I have a responsive style, like this:

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

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

If using jQuery to change the style like this:

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

It will change the font size in both media.

My question is how to change the bigFont's font-size for one of them using jQuery?

解决方案

what you need to do is to add another class

@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");

This will only change the font size for first media query

Note: This will only work if you know the font you want to set before hand else put a $(window).width() check

这篇关于如何使用jQuery更改响应样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！