文字大小为什么要用html {font-size: 62.5%;}

Web前端来源:简书1 120阅读模式

移动端开发需要考虑不同手机上不同分辨率的展示效果,所以需要自适应解决方案。通用的方案是使用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上设置具体像素值,设置成百分比,可以按照设备的基准字体大小给编写的网页设置好最适合用户浏览的字体大小。最重要的不是屏幕实际的像素大小,屏幕上文字的可读性才是最重要的。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
    • 无不为
      无不为 4

      大学问

    匿名

    发表评论

    匿名网友
    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    拖动滑块以完成验证