Question

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

我可以将其转换为％，当我缩放页面时，它会按比例更改吗？或者这是不好的实践？

Answer 1

这正是em和rem正在做的事情。

虽然em相对于其直接或最近父级的字体大小， rem仅相对于html（root）font-size。

Answer 2

您还可以尝试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单元列表，您可以找到here。

Answer 3

这不会起作用。使用％始终从父级继承。因此，我们假设您已在身体中设置font-size 14px。

body {
  font-size: 14px;
}

使用font-size: 100%;只会使用100％的14px。所以基本上50％与7px相同，无论你的窗口有多小/大。

我建议使用em甚至rem。两者都是相对值。虽然em与其父容器相关，但rem相对于根容器，在大多数情况下反映<body>。除此之外，em和rem可以被理解为'乘以字体x次'。根据我们之前使用14px的示例，使用2em将导致字体大小为28px，依此类推。

以下示例应该澄清一些事情。

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

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

Answer 4

缩放字体大小有几种方法。常见的方法是rem，em。

您可以在这里阅读更多相关信息

https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

Answer 5

您必须使用 em 而不是 px
em 它正是为此而完成的。

Answer 6

使用em，rem，vh或vw

而不是使用百分比

如果你决定使用vh和vw，请不要忘记使用后备版本与旧版浏览器的复古兼容性