利用vw做rem适配(纯css)

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对浏览器的兼容:

兼容性

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • 响应式布局的实现依靠媒体查询( Media Queries )来实现,选取主流设备宽度尺寸作为断点针对性写额外的样...
    iyimao阅读 3,508评论 0 0
  • 什么是Rem rem和em很容易混淆,其实两个都是css的单位,并且也都是相对单位,现有的em,css3才引入的r...
    tobAlier阅读 28,098评论 2 38
  • 在移动互联网快速发展的今天,手机的种类和尺寸越来越多,作为前端的小伙伴们可能会越来越头疼,但又不得不去适配一款又一...
    keenjaan阅读 27,102评论 9 86
  • 上一章 5 天眼穆惜凡明白自己虽然位居郁单国的天元帝女,却完全不知自己能做什么,如果贸然行事,怕以后会更不好混。渊...
    要饭团阅读 2,726评论 0 0

友情链接更多精彩内容