如何使H2移动响应能力强？

Question

我正在尝试实现以下目标，当屏幕尺寸为移动尺寸时，我希望HTML侦听CSS中的类，即@media标签类“ .new”，如何实现？ / p>

以下台式CSS：

h2{
  font-size: 30px;
}

下面的移动设备CSS：

@media (max-width:600px) {
  .new {
  font-size: 24px;
  }}

我当前的html，我想我需要在HTML中添加另一个div换行，以覆盖此内容？不能完全确定，请提出建议，如何让我的代码在移动大小如上所述的情况下监听.new类？

        <div class="list-group-item">
        <h2>HELLOWORLD
        <span class="glyphicon glyphicon-chevron-down"></span></h2>
        </div>

Answer 1

我将删除您的“新”类，并为<h2>元素添加特定于媒体的CSS规则。

更新

由于您不希望将此响应行为应用于所有<h2>元素，因此可以使用一个类，并使用该类定义CSS规则。

这是一个例子：

h2 {
  font-size: 30px;
}

@media (max-width:600px) {
  h2.responsive {
    font-size: 24px;
  }
}

<div class="list-group-item">
  <h2 class="responsive">
    HELLOWORLD
    <span class="glyphicon glyphicon-chevron-down"></span>
  </h2>
</div>

Answer 2

只需将let x = 5; if x.isMut { // do stuff } else { // do other stuff } 添加到您的class="new"中，如下所示：

<h2>