响应文本 <h1> [重复]答案

【问题标题】：Reponsive Text <h1> [duplicate]响应文本 <h1> [重复]
【发布时间】：2017-05-23 17:19:02
【问题描述】：

有人知道我如何让 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
}

【问题讨论】：

css-tricks.com/viewport-sized-typography

标签： html css responsive-design

【解决方案1】：

对于h1 标签（或其他任何东西），我建议使用vw 字体大小单位，或以下组合：

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

【讨论】：

没用这里是页面coco-mat.com 文字：“SLEEP ON NATURE WAKE UP IN A DREAM”
@P.Tzik - 它确实有效，我刚刚尝试过。你必须玩这些价值观。试试calc(1.2em + .4vw)

【解决方案2】：

您可以使用视口单位根据屏幕的宽度/高度来缩放文本。对于您的情况 - 将xvw（'x' 是期望编号）应用为font-size。

示例 -

h1 {
  font-size: 5vw;
  }

&lt;h1&gt;Hello, I'm heading&lt;/h1&gt;

这是来自 caniuse.com 的 support 表格

【讨论】：

谢谢我添加了你的代码，但是当我在移动文本上查看它时，“在梦中醒来”似乎有点小。有什么建议吗？
使用媒体查询，以便您可以在移动设备上增加font-size。例如 - @media only screen and (max-width: 480px) { h1 { font-size: 8vw; } }