最简单的移动端适配方案(rem+vw)--没有之一

  rem 这个单位对于前端来讲并不陌生了,在移动端适配方面,咱们常常会用到它,一般咱们会采用相似淘宝flexible.js 的方案, 写px,而后经过插件转化成rem,而后得出一堆小数值的rem单位.淘宝这个方案已经用了不少年,兼容性很好,然而如今已经2018年了,许多兼容性问题如今再也不那么头疼了,所以咱们如今有了更好的适配方案. 在很早之前,vw 这个单位就已经被列入w3c规范了,若是基本都支持了,vw 表示屏幕的1%,可能有人会问到那跟百分比有什么区别呢? 一般,不少状况确实能够被百分比替代,可是要知道百分好比果要子n代元素都生效,那得全部父级元素都得相对html,body 100%宽才能有做用,而vw则永远相对 屏幕1%.说了vw的含义来讲说怎么结合rem适配吧. 这里直接给出结果,只需一行代码便可

html{font-size:13.33333333vw}
复制代码

而后咱们便可根据设计稿(前提设计稿是750px的),这样咱们写1rem即为设计稿上的100px

, 效果如上图所示,注意:应设置meta为移动端

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
复制代码

, 是不感受很诧异,写的width:1rem,heigth:1rem的div 就是50px* 50px (iphone6为2倍屏,即对应750px设计稿上的100px*100px) 怎么搞定的,1句代码就能实现,太神奇.不信能够看看上图或者本身试一下.恩,就是这么简单,1句css代码就搞定,无需任何的js代码.

   下面分析下原理吧, 上面咱们说了vw表示1%的屏幕宽度,而咱们的设计稿一般是750px的,屏幕一共是100vw,对应750px,那么1px就是0.1333333vw, 为了方便计算,咱们放大100倍,同时咱们知道另外一个单位rem,rem是相对html元素,为了方便计算,咱们取html是100px,经过上面的计算结果1px是0.13333333vw,那么100px就是13.333333vw了.这样后面的用rem就很好计算了,这样就获得13.3333333vw对应100px(750px的 设计稿),而后咱们就能够很愉快的写rem单位了, 因为倍率是100,咱们也不须要啥计算插件之类的了,除以100,直接小数点向左移动2位,1rem是100px,那么10px就是0.1rem,1px就是0.01rem,小学生都会算了, 不须要用postcss-px-to-viewport这种工具转成一堆小数位特长的rem单位了,并且这个很方便,直接写rem,并不须要转换,用了转换工具 若是想写px的地方还得设置白名单或者黑名单,这个就不存在这种问题了, 想用相对的就rem,想绝对的就直接写px便可,并不须要其余的各类设置.是否是很简单?       改进版:通过一些实践,发现此方案只能兼容手机,甚至连ipad兼容都很差,固然,此处的兼容不是兼容问题,是效果问题,只要兼容vw的设备都能用这个方案,可是因为适配的根本是vw这个, 这个会随着设备的宽度愈来愈大,那么用rem作单位的元素也会愈来愈大,以致于若是这个在pc上,那么无法预览了,效果会不好,字太大了.这样咱们能够设置一下当屏幕过大的时候的状况,咱们能够加一句代码

@media (min-width: 560px) {
      html {
        font-size: 54px;
      }
    }
复制代码

加上这句代码,在pc上效果也很不错了, 哈哈,若是问为何是pc端字体是54px以及为何是560px为分界线, 好吧,我也不知道,这个是我本身安装flexible.js模拟出来的,flexible.js 在560px以上屏幕就是html{font-size:54px} 虽然改进版再也不如上面说的一句代码解决,不过也算是两句代码解决了.仍是很是简单的哦,不须要任何的转化工具. 本人已在公司项目作了实践,效果能够自行预:meeting.bioon.com/moyan/index… 移动端可扫码查看:

 查看原文  blog.noob6.com/2018/06/03/…