css - 基于 em 的布局有问题

Question

我正在尝试使用 css 构建布局，其中所有尺寸都在 em 中指定。我的印象是，这将允许页面以不同的字体大小/缩放级别以相同的方式显示。但是，我注意到随着大小/缩放的变化，文本的换行方式有所不同。

例如，在这个 jsfiddle中，文本以我的原生缩放和 1em 字体大小显示在一行上，但以 2em 字体大小换行。由于容器的宽度以 em 为单位，因此我希望它能够一致地换行/不换行，因此应该与字体大小成比例地增加。

我做错了什么，还是我只是误解了 em 测量的用途？

Answer 1

您理解正确，但是 font-size 定义了HEIGHT字体的 ，而不是WIDTH，因此在 em 中定义的容器宽度在不同的缩放级别和字体大小的一行中包含不同数量的字符。

我认为如果您将字体更改为等距系列，它可能会产生您所追求的效果。值得一试？

Answer 2

字体大小为 2em

没有“2em 字体大小”之类的东西。anem是当前字体大小的单位，所以语句是循环的。应该在 ems 中定义边距、缩进和宽度，而不是字体大小本身。