移动端适配

关于移动端适配有不少的解决方案好比有rem布局，媒介查询rem布局，vw布局，flexible布局

关于rem布局这里就不介绍了，这里介绍一下比较推荐的vw布局和flexible布局

1.vw布局

vw布局在以前可能有一些浏览器不支持，可是如今基本的浏览器都支持，

1vw = 当前屏幕逻辑像素宽度的1%

在640的设计稿上

1vw = 3.2px

100px = 31.25vw

在750的设计稿上

1vw = 3.75px

100px = 26.6666666vw

因此使用vw布局建议使用640的设计稿

固然有一些ui对640的设计稿没有概念，那就用第二种适配方案flexible

2.flexible

在网上你可能见到最多的flexible 就是lib-flexible,其实早就出了最新版本叫amfe-flexible,他俩之间区别就是

旧版本他手动设置了dpr，新版本没有，还有一个最关键的就是适配组件库，对于组件库的适配，lib-flexible就是由于设置了dpr，在android还好，由于它将全部的android的手机都设置为了dpr为1，而且没有对手机进行缩放，在iPhone手机上因为他设置了dpr，而且对屏幕进行了缩放，因此组件就会变得很小，而amfe-flexible没有对屏幕进行缩放，因此使用组件库就会很方便

使用方法

amfe-flexible 加 postcss-pxtorem

npm install amfe-flexible --save
npm install postcss-pxtorem --save

postcss-pxtorem就是将px转化为rem

babel.config.js

module.exports = {
     plugins:{
          'autoprefixer':{
                browsers:['Android >= 4.0','iOS >= 7']
          },
          'postcss-pxtorem':{
                rootValue:37.5,
                propList:['*']
           }
}

全局引入amfe-flexible,以后还需呀设置viewport

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

这样不只可使用组件库，并且还可使用750的设计稿，固然这种方法多少均可以只用，只要配置好rootValue就能够了

在这里postcss-pxtorem还解决了1像素线的问题，若是想写1像素，写成1PX就不被解析，他就是真正意义上的1px