html - 使显示标题具有响应性

Question

我正在使用引导程序的“display-2”类，当我进入较小的设备时，我需要使文本响应/更小。

戏剧性地参与

[

标签： htmlcssbootstrap-4

Answer 1

要使您的文本响应，您只需在 css 文件中使用mediaquery 。

媒体查询是CSS3中引入的一种 CSS 技术。仅当某个条件为真时，它才使用@media规则来包含 CSS 属性块。

索引.html

    <div>
      <h1 class="heading">Dramaticall Engage</h1>
    </div>

样式.css

    .heading{
         font-size: 30px;
      }

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

      .heading{
        font-size: 20px;
      }
    }

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

      .heading{
        font-size: 14px;
      }
    }