让前端飞

利用vw做rem适配(纯css)

2017-10-31  本文已影响0人  李佳明先生

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


![测试宽度一] 测试宽度二

还有个问题,就是应该有个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对浏览器的兼容:

兼容性

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

上一篇 下一篇

猜你喜欢

热点阅读