利用vw做rem适配(纯css)

vw:相对于视口的宽度。视口被均分为100单位的vw;
我在想,既然vw是相对于视口的宽度,又因为视口的宽度是不固定的,那么可以用vw来做到rem适配吗?
下面是测试的截图:
(如果是用手机看的,因为自动把图片缩放了,所以看着字体大小一样)


利用vw做rem适配(纯css)_第1张图片
![测试宽度一]
利用vw做rem适配(纯css)_第2张图片
测试宽度二

还有个问题,就是应该有个px与vw的换算比例吧,我又看了看。
假如ui图的宽度为1920px,又因为vw会把宽度分为100份,那1vw=19.2px,1920/100=19.2(px),现在这样还是不行,不好算,那就算出每100px是多少vw,(100/19.2)*1=(约等于)5.21(vw),这样,设根字体html为5.21vw,则0.18rem=18px
ok,还不错,那么,如果要应用到项目中,因为是前端嘛,肯定要考虑到兼容性问题,以下是vw对浏览器的兼容:

利用vw做rem适配(纯css)_第3张图片
兼容性

简友们可以根据自己的需求来选择。
但毕竟现在这个还不够成熟,应用到实际项目中还有待观察,应该算笔者自己的一个头脑风暴吧 ^_^

你可能感兴趣的:(利用vw做rem适配(纯css))