Question

不确定这是否需要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”，甚至可以在该视口大小上禁用该类。

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

Answer 1

你可以做类似下面的事情。

将大型和普通类都添加到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>

Answer 2

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

这是一个例子：

Option

查看有关this

的教程

Answer 3

你可以通过媒体查询来做到这一点：
此代码适用于所有设备：

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

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

查看 link 了解更多详情

如何仅删除特定视图端口的类或激活类

3 个答案: