如何利用vw+rem进行移动端布局

前言

因为在公司，只有一个前端，在做移动端布局的时候。利用px进行布局,发现，需要进行各种手机的适配。 所以在开发第二版的时候，想着引用lib-flexible库(即手淘的方案),询问了上一家公司的同事，会有一些字体和一些诡异的问题。 在无意中，突然一个网友跟我说，他有一个很好用的适配方案。利用vw+rem。听着他分析了一把，感觉还不错，所以大胆尝试了一把

根据CSS3规范,视口单位主要包括以下4个:

• vw : 1vw 等于视口宽度的1%
• vh : 1vh 等于视口高度的1%
• vmin : 选取 vw 和 vh 中最小的那个
• vmax : 选取 vw 和 vh 中最大的那个

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">

因为iPhone6以及大多数的dpr为2,为了第二步的方便进行换算

第二步设置body、html的font-size

html {
    font-size: 13.3333333333333vw // 100px
}

13.3333333333333vw怎么来?

100 / 750 = 0.133333333333333vw 我们把这个适口当做100px,然后除于750换算得出 1px = 0.133333333333333vw 那么整个适口等于 0.133333333333333 * 100 = 13.3333333333333vw = 100px

最终于得出 100px = 1rem

通过这样子换算我们利用vw把rem转换成了以100px为基准

那么在项目上就很好地可以进行使用了

div {

     // width: 100px;
     width: 1rem; 
}

span {
   // height: 12px
    height: .12rem
}