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对浏览器的兼容：
兼容性
简友们可以根据自己的需求来选择。
但毕竟现在这个还不够成熟，应用到实际项目中还有待观察，应该算笔者自己的一个头脑风暴吧 ^_^
vw：相对于视口的宽度。视口被均分为100单位的vw；我在想，既然vw是相对于视口的宽度，又因为视口的宽度是不固定...
利用vw单位和rem来进行移动端适配，可以不用使用js来判断 来源自auto网
1，先看看网上关于移动端适配讲解 再聊移动端页面适配，rem和vw适配方案！ 基础点：rem相对根节点 字体的大小...
一.rem适配 之前对rem的适配仅仅停留在使用的阶段，近期需要进行源码封装，于是乎对原理进行了探寻，其实就是数学...
1，先看看网上关于移动端适配讲解 再聊移动端页面适配，rem和vw适配方案！ 基础点：rem相对根节点字体的大小。...
移动端页面适配 rem 与 vw 再看看15年手淘方案：Flexible + rem Flexible 从流行到今...
css单位 px 、rem 、vw 都是相对单位 rem rem 的计算是相对于 html 页面的 font-si...
移动端页面适配，rem和vw适配方案！ 基础点：rem相对根节点字体的大小。所以不用px;根字体：字体的大小px;...
1. 简单入门的rem适配方案，纯CSS实现 html{ font-size:20px; } @mediaonly...
参照 移动前端自适应适配布局解决方案和比较纯css3使用vw和vh实现自适应的方法
本文标题：利用vw做rem适配（纯css）
本文链接：https://www.haomeiwen.com/subject/puavpxtx.html
网友评论