线性高度的EM [英] EM's for line-height

问题描述

我想将我的新网站从像素转换为ems。

I would like to convert my new website from pixels to ems. My question is, should I also apply ems to my text line-height property?

推荐答案

假设转换为ems意味着使用 em 单位为 font-size ，那么你应该设置 line-height 以适应字体大小的方式。这两个属性密切相关，如果你在 em 和 px 中设置其中一个，或 pt ，则如果字体大小更改，页面将中断。

Assuming that "converting to ems" means using the em unit for font-size, then you should set line-height in a manner that also adapts to the font size. The two properties are closely related, and if you set one of them in em and the other (e.g.) in px or pt, then the page will break if the font size is changed. So it would work against the very idea of "using ems" to use essentially different units for essentially connected properties.

例如，如果你设置了，那么它就会使用基本上不同的单位。 font-size：1.5em 和 line-height：18px ，那么事情将取决于元素的父级的字体大小，

For example, if you set font-size: 1.5em and line-height: 18px, then things will depend on the font size of the element’s parent and may go very wrong if that size is much smaller or much larger than expected.

无论您是使用 em 单位还是纯数字是一个不同的问题。在 line-height：1.2 中只使用一个数字，主要相当于使用 em line-height：1.2em 。但是有一个区别，当 line-height 被继承时，它是继承的纯数字，而不是计算的值。

Whether you use the em unit or a pure number is a different issue. Using just a number, as in line-height: 1.2, is primarily equivalent to using the em unit, as in line-height: 1.2em. But there is the difference that when line-height is inherited, it is the pure number that gets inherited, not the computed value.

例如，如果一个内部元素的字体大小是其父元素的两倍，那么继承值 1.2 意味着使用其自身字体大小的1.2倍，这是OK的。但是如果父项具有 line-height：1.2em ，那么子项将继承一个值，该值是父项字体大小的1.2倍 - 这比它自己的字体大小小得多。

For example, if an inner element has twice the font size of its parent, then the inherited value 1.2 means that 1.2 times its own font size is used, which is OK. But if the parent had line-height: 1.2em, then the child would inherit a value that 1.2 times the parent’s font size – which is much smaller than its own font size.

有关更多说明，请参阅行-height @ Mozilla开发人员网络

for more explanation end examples see line-height @ Mozilla Developer Network

这篇关于线性高度的EM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！