移动端适配

关于移动端适配有很多的解决方案比如有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就可以了

移动端适配

原文：https://www.cnblogs.com/guan-shan/p/10815101.html