李二狗 — @Meniny
Table of Content
最近花了点时间修改博客的页面效果，第一次用 CSS 里的 rem 单位，顺便总结一下。
我们知道，在设置字体时常见的 px 和 em。
px
px 是很常用的单位，比较稳定和精确，但也存在一些问题，例如当用户改变了浏览器字体胆小时如果使用 px 为单位，就会打乱页面布局，为了解决这样的问题，我们有了 em 单位。
em
em 值是相对于父元素的值，在使用 em 时需要知道其父元素的属性，或者设置为 1em。
body {
font-size: 50%;
/*10 ÷ 20 × 100% = 50%*/
}
h1 {
font-size: 2.4em;
/*2.4em × 10 = 24px */
}
p {
font-size: 1.0em;
/*1.0em × 10 = 10px */
}
使用 em 的计算公式为:
1 ÷ 父元素font-size × 像素值 = em值
rem
rem 在 W3C 官网的描述是 font size of the root element，也就是说 rem 是相对于根元素的值。
顺便介绍一个相关的网站 PXtoEM.com。
html {
font-size: 62.5%;
/*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size: 1.4rem;
/*1.4 × 10px = 14px */
}
h1 {
font-size: 2.4rem;
/*2.4 × 10px = 24px*/
}
