如何使h2移动响应？

Question

我正在努力实现以下目标，当屏幕尺寸为移动尺寸时，我希望我的 HTML 收听 CSS 中的 class，@media标记 class “.new”，我该如何实现？

桌面 CSS 下面：

h2{
  font-size: 30px;
}

下面的移动设备 CSS：

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

我当前的 html，我想我需要添加另一个 div 包装，即添加到 HTML 以覆盖它？不太确定，请指教，如何让我的代码听 .new class 当它的移动尺寸如上时？

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

Answer 1

只需将 class="new" 添加到您的 <h2>，就像这样：

<h2 class="new">HELLOWORLD <span class="glyphicon glyphicon-chevron-down"></span></h2>

Answer 2

我会删除您的 "new" class 并为 <h2> 元素添加特定于媒体的 CSS 规则。

更新

由于您不希望将此响应行为应用于所有 <h2> 元素，您可以使用 class 并使用 [=] 定义 CSS 规则33=].

这是一个例子：

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>

How to make h2 mobile responsive?