-1

我在 html 中有以下部分,但我需要通过媒体查询更改 H2 标签的字体大小和位置,因为它仅适用于笔记本电脑。我不知道如何将它翻译成 CSS 并工作,因为它不仅仅是一张图片或一段文字。

<section id="slide-2" class="homeSlide">
  <div class="bcg" data-center="background-position: 50% 10px;" data-top-bottom="background-position: 50% -100px;" data-bottom-top="background-position: 50% 100px;" data-anchor-target="#slide-2">
    <div class="hsContainer">
      <div class="hsContent" data-center="opacity: 1" data-center-top="opacity: 0" data--100-bottom="opacity: 0;" data-anchor-target="#slide-2">
        <h2>Luxurious Jaguar XF 6 Turbo Twin</h2>
      </div>
    </div>
  </div>
</section>

4

1 回答 1

1

您可以在单独的文件中编写 CSS 并在 html 中链接到它,也可以将 CSS 放在 html 中的样式标签之间。这是一个如何做的例子。

在您的 CSS 中,您将如何为 H2 标签编写自定义规则:

h2 {
  font-size: 40px;
  color: red;
}

至于媒体查询,也可以在您的 CSS 中进行。下面是一个简单示例,说明如何创建仅在屏幕宽度小于 800 像素时应用的规则:

@media only screen and (max-width: 800px) {
    h2 {
      font-size: 20px;
  }
}

以下是有关如何进行媒体查询的更多示例和说明。祝你好运!

于 2018-10-12T04:35:18.287 回答