由于（大部分）浏览器的默认字号为16px，所以一般来说把html的font-size归一化为16px是比较合适的实践方式。同时可以参考这篇文章。
为了大家以后参考方便，我列了一些常用的Media Query断点（以iPhone 6为基准）。
@media only screen and (min-width: 320px) {
html {
font-size: 13.65px;
}
}
@media only screen and (min-width: 360px) {
html {
font-size: 15.36px;
}
}
@media only screen and (min-width: 375px) {
html {
font-size: 16px;
}
}
@media only screen and (min-width: 390px) {
html {
font-size: 16.64px;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 17.664px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 27.31px;
}
}
大家可能还会看到一些文章中建议把html字号设成62.5%。
html {
font-size: 62.5%;
}
因为刚提到浏览器默认的字号为16px，因此换算成百分比就是62.5% = 1 / 16。
那为什么要用百分比呢？因为考虑到辅助功能和浏览器设置。对于部分用户，可能会在手机或浏览器的设置中增大手机字号，这意味着对方平时看字是很费力的，所以他才要放大。那把html的字号设置成百分比就很贴心了，会随着手机设置改变页面的字号。
在手机上设置默认字号是很常见的现象，所以如果是一个充满人道主义的排版，我觉得用百分比是非常高尚的。它不仅从视觉角度去考虑美，更加做到了“用户至上”这四个字。
好，回到现实环境。只有国外那些对Accessibility要求比较高的国家，才会真正去落实这些。但国内的话，老实说，更注重外观的美。从来没有哪家互联网公司的页面会去兼容Screen Reader，也很少做Keyboard Shortcut。
扯远了，就算你看到用62.5%的情况，有些间距也是不合理的，都做的不太好，特别是把文案做到图片上的，对字号根本不敏感。如果出发点不是为了用户的视觉接受能力，那就别用62.5%；如果想做，就把缩放考虑到位了，别做半吊子。
另外，针对本小节开头用16px的情况，这里再给大家提供一招（我调研了一下目前没人这么用，也是灵光一现才想到的）。
用Media Query的缺点是什么？它是分段函数，对于宽度在[320, 360)区间内的屏幕，会适用同一套方案。最完美的应该是线性函数，怎么做？很简单，用vw即可。
html {
font-size: 4.266667vw;
}
用1行代码代替之前6个冗长的Media Query，还不错吧。
如何提高rem的可读性
我们来谈最后一个话题。
当你知道html的font-size怎么设置后，肯定想问，难道我每次写代码时，还得做个除法，把rem的值计算出来吗？
我相信稍微“现代”一点的开发者，都会用到CSS预处理。基于这个工具，事情就很好办了，以LESS为例，两步操作如下：
// 1. 按iPhone 6的视觉稿，基准字号为16px，因此可以设置一个LESS变量。
@px: 16rem;
// 2. 通过LESS内置的除法自动运算。比如用到16px的字号时，写成16/@px即可，最后会计算成1rem。
.example {
font-size: 16/@px;
margin: 20/@px 0;
padding: 20/@px 10/@px;
}
本文给大家介绍了rem的适配方式，如何设置html的font-size，如何更快地书写rem的值。
