使显示标题响应

Question

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

戏剧性地参与

[

​

Answer 1

要使文本响应，只需在css文件中使用媒体查询即可。

媒体查询是在CSS3中引入的一种CSS技术。它使用@media规则只在某个条件为真的情况下包含一个CSS属性块。

index.html

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

style.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;
      }
    }

Answer 2

根据屏幕大小和任何内容对字体的响应大小使用@media查询。

@media only screen and (max-width: 991px)
@media only screen and (max-width: 767px)
@media only screen and (max-width: 640px)
@media only screen and (max-width: 640px)