各浏览器默认字体字号为 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。