font-size: 62.5% 的含义

2019独角兽企业重金招聘Python工程师标准>>>

各浏览器默认字体字号为 16px，即 16px 相当于 1rem

html, body {
    font-size: 16px; /*default font-size equal 1 rem*/
}

h1 {
    font-size: 1rem; /*16px * 1 = 16px*/
}

h2 {
    font-size: .8rem; /*16px * 0.8 = 12.8px*/
}

当我们定义 10px / 16px = 0.625 = 62.5% 时，浏览器的默认字体为 16px * 62.5% = 10px

此时即 10px 相当于 1rem

html, body {
    font-size: 62.5%; /* 10px / 16px = 62.5% 即 font-size 是 10px 相当于 1rem */
}

h1 {
    font-size: 1rem; /*10px * 1 = 10px*/
}

h2 {
    font-size: 1.2rem; /*10px * 1.2 = 12px*/
}

h2 {
    font-size: 1.4rem; /*10px * 1.4 = 14px*/
}

至于为何不直接定义根元素的 font-size 为 10px 是为了兼容 IE6。

转载于:https://my.oschina.net/sallency/blog/1812122