Question

有谁知道我怎么能让h1响应？它一直在移动浏览器模式下显示大文本

HTML： <div class="index__content"> <h1 style="color:#CC9900">DREAM</h1>

CSS：

index__content{
    position:absolute;top:50%;left:50%;
    -webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
    width:100%;
    max-width:655px
}

Answer 1

对于h1标记（或其他任何内容），我建议使用vw字体大小单位或类似的组合：

font-size:calc(1.1em + .3vw);

Answer 2

您可以使用视口单元根据屏幕的宽度/高度缩放文本。对于您的情况 - 将xvw（＆＃39; x＆＃39;是愿望号码）应用为font-size。

示例 -

＆＃13;

h1 {
  font-size: 5vw;
  }

＆＃13;

<h1>Hello, I'm heading</h1>

＆＃13;

这是来自caniuse.com的support表

响应文本<h1>

2 个答案: