例如：
html {
font-size: 62.5%;
}
p {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.3; /* how do i calculate this value? */
}
我问这个问题的原因是我很困惑如何理解体内字体大小(为了便于计算),实际的rem字体大小和行高的“非值”之间的关系,就我而言在STATIC布局中理解表示如下字体大小：
font-size：20px;和行高：2.0; – 将font-size的高度添加为line-height
在流畅的布局中 – 当使用字体大小的rem时 – 将是“非值”行高：2.0;使用在rem中计算的字体高度作为行高还是仍然依赖于基于像素的值(在示例中是旧浏览器的后备)？
我想我应该说这是我原来的问题 – 我现在要编辑
解决方法
line-height属性.
<number>The used value is this unitless<number>multiplied by the
element’s font size. The computed value is the same as the specified
<number>. In most cases this is the preferred way to set line-height
with no unexpected results in case of inheritance.
<length>The
specified<length>is used in the calculation of the line Box height.
<percentage>Relative to the
font size of the element itself. The computed value is this percentage
multiplied by the element’s computed font size. Percentage and em
values may have unexpected results.
- 07001
数字和百分比之间的差异：
根据MDN doc,这个无单位数乘以元素自己的font-size(也适用于当前元素的每个子元素).
使用百分比或em作为父元素时,会使子元素从父元素的计算行高中服从.
检查this demo以查看问题.
把所有人放在一起
在这种情况下,所有这些值都具有相同的效果：
p {
font-family: Arial,sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.3; /* = 1.3 * computed font-size */
line-height: 130%; /* = 1.3 * computed font-size */
line-height: 1.3em; /* = 1.3 * computed font-size */
}
但是,如果要计算rem单位中的行高值,可以使用以下内容：
html {
font-size: 62.5%; /* ~10px = 16px(default) * 0.625 */
}
p {
font-family: Arial,sans-serif;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.3; /* as fallback */
/* value = (10px * 1.4 * 1.3) / 10px = 1.82rem
| | |
<html> | | --> line-height multiplier (same as <number>)
font-size <-- |
in px --> Current element's font-size ratio
*/
line-height: 1.82rem;
}
span { background-color: gold; } /* for demo */
<p><span>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Consectetur quis omnis repellat voluptates necessitatibus repellendus sapiente nesciunt vero dolorem voluptate mollitia ex a quo consequuntur quia quasi aperiam quibusdam maiores.</span></p>
仅供参考：< html>的字体大小的默认值在大多数Web浏览器中是16px,但它不会对我们的计算进行任何更改.
