美文网首页css我爱编程
字体适配为什么用html {font-size: 62.5%;}

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

作者: 笨人不能懒 | 来源:发表于2018-03-06 21:27 被阅读0次

问题

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

解决

通用的方案是使用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%;}

    问题 移动端开发需要考虑不同手机上不同分辨率的展示效果,所以需要自适应解决方案; 解决 通用的方案是使用rem,r...

  • css3 rem的计算

    html {font-size: 62.5%;/10 ÷ 16 × 100% = 62.5%/}body {fon...

  • 62.5%

    font-size : 62.5%,你见过它吧? 在响应式设计过程中,经常将页面跟节点字体设为62.5%,比如选择...

  • 2022-04-24

    rem适配 rem是相对于根元素的字体大小的单位,也就是html的font-size大小,浏览器默认的字体大小是1...

  • 移动端rem+vw适配

    介绍: rem: rem是相对单位,设置根元素 html 的 font-size,比如给 html 设置字体大小为...

  • 说说rem

    rem单位是在移动端布局中最常使用的单位通常做法是设置html{font-size:62.5%},然后使用媒体查询...

  • rem实现移动设备响应式布局

    rem单位基于 html 元素的字体大小。即如果当前HTML的font-size为16px,那么1rem=16px...

  • 移动端方面记录(持续更新)

    移动端适配 动态rem方案html的font-size 为 屏幕宽度 / 10记得给body写一个font-siz...

  • rem谷歌兼容处理

    最近遇到了一个小麻烦,px转rem做自适应处理的时候,给html标签添加 font-size:62.5%;从而使1...

  • em和rem的区别

    em相对于父元素的字体大小,rem相对于根元素(html)的字体大小 html{ font-size:12px}...

网友评论

    本文标题:字体适配为什么用html {font-size: 62.5%;}

    本文链接:https://www.haomeiwen.com/subject/lcarfftx.html