字体适配为什么用html {font-size: 62.5%;}而非html {font-size: 10px;}

问题

移动端开发需要考虑不同手机上不同分辨率的展示效果,所以需要自适应解决方案;

解决

通用的方案是使用rem,rem是root-em的缩写,是根相对单位,其相对的是html的font-size的单位;
首先,html的font-size默认是16px => 1rem=16px;
那么,要表示14px,就是0.875rem,是不太好看且计算起来也比较麻烦的;
所以,如果把html的font-size设置为10px,那么表示14px就是1.4rem了。
但是,为了兼容性和未来发展趋势的综合考虑,px这个单位的含义已经越来越混乱,几乎无法评估以后的设备是会一直像现在这样对网页上的px做兼容处理,还是让px回归“像素”的本意
如果,设置html {font-size: 62.5%;},1rem = 16px*62.5%=10px,14px=1.4rem;
而且,62.5%代表默认字体尺寸的62.5%,这个含义基本不会有混乱

总结

《响应式Web设计实践》中提到过这一点,桌面浏览器默认页面字体大小是16px,这种情况下设置成具体像素大小或者对应的百分比,看起来的效果是一样的,
但是其他类型的设备的默认字体大小不一定是16px,特别是高分辨率的设备,16px大小的字体在它们上面看起来会非常小,
✨所以不能在body上设置具体像素值,设置成百分比,可以按照设备的基准字体大小给编写的网页设置好最适合用户浏览的字体大小。
✨ 最重要的不是屏幕实际的像素大小,屏幕上文字的可读性才是最重要的。

你可能感兴趣的:(字体适配为什么用html {font-size: 62.5%;}而非html {font-size: 10px;})