话题开始前
我们都知道1rem是等于html fontSize标签的字体大小的,我们主要用来做移动端网页设计稿等比例在手机上面的显示。
看到的问题
这个html fontsize的大小是通过js动态计算的,而这个js的运行时晚于html渲染的,所以会导致一个问题,进入页面时候会看到页面整体缩放一下
为了避免使用js计算,我看到有些网站时用媒体查询给html设置fontSize的,这个方式也不失为一种解决方式,但是需要维护好几个设备宽度,并且并不全面,虽然问题不大,但是并不够完善
2024年
2024年,我有重温了一下这方面的知识,我发,其实可以使用calc配合vw来计算这个html fontSize的,先贴代码,再讲原理
html {font-size: calc(100vw / 7.5);
}
原理
我们依旧期待一个前提,1rem等于设计稿上面的100px,同时默认设计稿为750px
如果设计稿是750,那理论上一个rem等于100px
假设设计稿是750px,那100px就等于750/7.5
同样,我们想要拿到屏幕上面等比例的宽度
也需要网页渲染区域宽度除以7.5,
这样就走可以得到网页渲染区域的【等比例的宽】
屏幕屏幕宽/7.5=设计稿宽/7.5
那如果是640屏幕宽呢,那上面的代码就会是
html {font-size: calc(100vw / 7.5);
}
我们同一家公司里面的设计稿肯定必须得统一一个标准的,目前主流就是750,如果出现不同尺寸饿设计稿,这时候就应该是工作流程活着标准上面出现了什么问题了,
如何使用
宽高100px的div写成以下这样就可以了
div{width:1rem;height:1rem
}
如何不需要自己手动写rem
可以使用第三方插件,例如post-css-px2rem活着less2rem等。。。。。
兼容:
不过奇怪的是caniuse上面 chrome form android的支持怎么看起来版本这么高,我18年时候就开始用calc和vm了