如何仅针对特定视口删除 class 或激活 class

Question

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

基本上我希望 class 只对中小型浏览器有效。示例：

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

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

我希望能够将 mobile/medium 视图中的 class“.big”切换为“.normal”，甚至在该视口大小下禁用 class .

这可能吗？即使有任何解决方法？

Answer 1

您可以执行如下操作。

将 big 和 normal class 添加到 div。但是保持 class 这样的层次结构。

先正常后大

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

<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>

Answer 2

您可以在同一个 class 上使用媒体查询。

这里有一个例子：

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

查看有关 this

的教程

Answer 3

您可以使用媒体查询来做到这一点：
这段代码在所有设备上都能完美地与我一起使用：

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

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

查看此 link 了解更多详情

如何仅针对特定视口删除 class 或激活 class

How to Remove class or activate class for specific view port only

css

mobile

viewport

tablet

media-queries