基于 em 的布局有问题答案

【问题标题】：Trouble with em based layout基于 em 的布局有问题
【发布时间】：2012-03-17 20:49:04
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

但是字符的高度和宽度肯定会随着大小的变化保持相同的比例吗？真的是这样吗，在 1em 时，“t”是 12pt 高和 6pt 宽，但在 2em 时，它是 24pt 高而不是 12pt 宽？如果确实如此，为什么等宽字体会有所不同？ 编辑：我看到使用 courier 的效果相同。
仔细想想，字体保持成比例可能是真的，因此等宽字体也会有同样的问题。我脑海中闪过一些想法：也许容器的宽度被四舍五入到整个像素？也许字符之间的空间与 font-szie 的变化不成比例？我不确定，也没有结论性的答案。

【解决方案2】：

字体大小为 2em

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

【讨论】：