使用 CSS 动态调整字体大小 [重复]答案

【问题标题】：Adjusting font size dynamically with CSS [duplicate]使用 CSS 动态调整字体大小 [重复]
【发布时间】：2015-05-14 21:35:06
【问题描述】：

我有以下 HTML 和 CSS 代码：

HTML：

<div>
    <a href="#">ITALIANO</a>
    <a href="#">ENGLISH</a>
    <a href="#">FRANÇAIS</a>
    <a href="#">DEUTSCH</a>
</div>

CSS：

div>a{
   margin-left: 30px;
}

div{
   font-size: 28px;
   width: 70%;
   margin: 2% auto;
}

正常缩放没有问题。当我放大和缩小时出现问题，因为文本变得太大，这使得它使用两行，或者变得太小。有没有什么方法可以在没有 JavaScript 的情况下动态调整字体大小？

谢谢

【问题讨论】：

你可能想修正这个问题的标题，因为它与你的问题无关。另外，请参阅：stackoverflow.com/questions/14431411/…
@JacobRaccuia 我希望新的更好。

标签： html css

【解决方案1】：

我打算建议（直到我看到@Jacob 对视口大小的排版的回答，但我不知道有任何错误）。这个想法是在您的 css 代码中的 html 代码中分配一个通用的字体大小。基本字体大小设置为 16px=1em。然后其余的 CSS 代码字体大小可以是百分比，这将使它们根据屏幕宽度做出响应。例如：

html {
font-size: 1em;
}

div>a{
margin-left: 30px;  <-- I would use left margin as percentage here, which will adjust according to screen width.
    }

div{
font-size: 175%;  <-- this is for 28px
width: 70%;
margin: 2% auto;
}

【讨论】：

【解决方案2】：

取自此 SO answer，您可以设置字体大小以响应视口宽度。

p {
    font-size: 30px;
    font-size: 3.5vw;
}

更多信息请访问CSS Tricks。

【讨论】：

哈，你也打过我吧！