Css 基于em的布局问题

Css 基于em的布局问题,css,fluid-layout,em,Css,Fluid Layout,Em,我正在尝试使用css构建一个布局,其中所有维度都在em中指定。我的印象是,这将允许页面以相同的方式以不同的字体大小/缩放级别显示。但是,我注意到,随着大小/缩放的变化,文本的换行方式会有所不同 例如,在中,文本以“我的原生缩放”和1em字体大小显示在一行上,但换行时的字体大小为2em。由于容器的宽度以em为单位,因此我希望它能够一致地进行换行/不进行换行,因此应该与字体大小成比例地增加 是我做错了什么,还是我只是误解了em测量对什么有用?您理解正确,但字体大小定义了字体的高度,而不是宽度,因此,

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

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


是我做错了什么,还是我只是误解了em测量对什么有用?

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

我认为如果你把字体改成单间距的字体,可能会产生你想要的效果。值得一试吗

字体大小为2em


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

但字符的高度和宽度肯定会随着大小的变化保持相同的比例吗?真的会是这样吗?在1米时,t高12磅,宽6磅,但在2米时,t高24磅,宽12磅?如果确实如此,为什么单间距字体会有所不同?编辑:我在使用courier时也看到了同样的效果。想想看,字体保持比例可能是正确的,因此单间距字体也会有同样的问题。我脑海中闪过一些想法:也许容器的宽度是圆形到整个像素?也许字符之间的间距与字体的变化不成比例?我不确定,也没有结论性的答案。