CSS3定义了一个font-size被调用的新长度单位rem.这允许我们计算元素font-size与根元素(html元素)的关系.
为了font-size更容易计算,我们通常假设根元素font-size是16px,因此CSS通常最终会像这样:
html { font-size:62.5%; } // 10px = 16px * 0.625
因此,每个元素高度与例如rem相对10px
p{ font-size : 1.4rem ;} // 14px = 10px * 1.4
我无法找到为什么我们假设我们可以乘以16px？我们怎样才能相信每个浏览器都具有相同的基值16px？是否有关于预定义的标准描述16px？
参考
Ste*_*ide 21
基数font-size由用户在浏览器中预先定义的首选项确定.
几乎在每个浏览器中,16px都是比例字体的标准.这也可以根据字体是否使用衬线或是固定宽度字体而改变.
在大多数项目中,我通常将em元素预设为使用font-size值而不是值rem或font-size值,以确保所有浏览器,屏幕和设备具有相同的字体大小,并且页面上的元素保持相同的大小和比例.
请记住,使用em父对象font-size并与之成比例,而rem使用根html元素
例如:
html {
font-size: 16px;
}
h1 {
font-size: 2em; // 32px
}
p {
font-size: 1em; // 16px
}
.someClass {
font-size: .75em; // 12px
}
.someClass p {
font-size: 2em; // 24px
}
.someClass p .test {
font-size: 1.25rem; // 20px
}<html>
<h1>2em Title Text</h1>
<p>Normal Element Text</p>
<div class="someClass">
someClass font size
<p>SomeClass with em</p>
<p><span class="test">someClass p element with class test</span>
</p>
</div>
</html>