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

Posted 2023-03-06

【中文标题】使用 CSS 动态调整字体大小 [重复]

【英文标题】：Adjusting font size dynamically with CSS [duplicate]

【发布时间】：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 的情况下动态调整字体大小？

谢谢

【问题讨论】：

你可能想修正这个问题的标题，因为它与你的问题无关。另外，请参阅：***.com/questions/14431411/…

@JacobRaccuia 我希望新的更好。

【参考方案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。

【讨论】：

哈，你也打过我吧！