如何仅删除特定视口的类或激活类答案

【问题标题】：How to Remove class or activate class for specific view port only如何仅删除特定视口的类或激活类
【发布时间】：2015-08-25 23:58:50
【问题描述】：

不确定这是否需要 Javascript，或者是否有办法单独使用 CSS。

基本上，我希望有一个仅适用于中小型浏览器的课程。示例：

<style>
   .big {font-size: 2em;}
   .normal {font-size: 1em;}
</style>

<div class="big">
   <p> This text is huge on normal size screens.</p>
</div>

我希望能够将移动/媒体视图中的“.big”类切换为“.normal”，甚至在该视口大小下禁用该类。

这可能吗？即使有任何变通办法？

【问题讨论】：

标签： css mobile media-queries viewport tablet

【解决方案1】：

您可以通过媒体查询做到这一点：
这段代码在所有设备上都能完美配合我：

@media only screen 
  and (max-width: 320px){

 .big {font-size: 2em;}
   .normal {font-size: 1em;}
}

查看link了解更多详情

【讨论】：

【解决方案2】：

你可以在同一个类上使用媒体查询。

这是一个例子：

.big{
        background-color: red;
    }
@media screen and (max-width: 300px) {
    .big{
        background-color: lightblue;
    }
}

查看有关this的教程

【讨论】：

【解决方案3】：

您可以执行以下操作。

将大类和普通类添加到 div。但是保持这样的类层次结构。

先正常后大

现在您可以在特定视口处说，使法线的字体大小具有重要价值。

<style>
  .big {
    font-size: 2em;
  }
  .normal {
    font-size: 1em;
  }
  @media (max-width: 767px) {
    .normal {
      font-size: 1em !important;
    }
</style>

<div class="normal big">
  <p>This text is huge on normal size screens.</p>
</div>

【讨论】：