如何转换字体大小(百分比)？

Question

如何将字体大小按百分比转换为自适应设计？现在，span元素具有属性：font-size: 14px;。

我可以将它转换为%，当我缩放页面时，它将按比例进行更改吗？还是做得不好？

Answer 1

您还可以尝试vh视口高度和vw视口宽度。

<span class="s1">Lorem ipsum dolor sit amet</span>
<span class="s2">Lorem ipsum dolor sit amet</span>

CSS：

span.s1 {
   font-size: 5vh
}
span.s2 {
   font-size: 5vw
}

小提琴：https://jsfiddle.net/h9e6ubdz/调整您的窗口大小，以查看它的行动。还有一个非常有用的列表，所有的CSS单元，您可以找到这里。

Answer 2

这正是em和rem所做的。

https://j.eremy.net/confused-about-rem-and-em/

当em相对于其直接或最近的父级的字体大小时，rem仅相对于html (root)字体大小。

Answer 3

一开始是行不通的。使用%总是从父继承。让我们假设您已经在您的身体中设置了一个font-size of 14px。

body {
  font-size: 14px;
}

使用font-size: 100%;只需使用14 of的100%。因此，不管你的窗户有多小/多大，基本上50%和7便士是一样的。

我建议使用em，甚至rem。两者都是相对价值。em相对于它的父容器，而rem相对于根容器，后者在大多数情况下反映了<body>。除此之外，em和rem还可以被理解为“乘以字体x倍”。根据前面使用14 so的示例，使用2em将导致字体大小为28 so，依此类推。

下面的示例应该澄清一些问题。

.multiply-by-one {
  font-size: 1rem; /* font-size: 14px; */
}

.multiply-by-two {
  font-size: 2rem; /* font-size: 28px; */
}