Question

我有以下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的情况下调整字体大小？

由于

Answer 1

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

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

可以在CSS Tricks找到更多信息。

Answer 2

我打算建议（直到我看到@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;
}

使用CSS动态调整字体大小

2 个答案: