移动端适配方案--rem和flexible

一、为什么用flexible，什么是flexible

传统的开发过程中，h5页面经常采用rem像素来达到适配不同分辨率屏幕的目的，一般UI设计师的设计稿都是px为单位，这时候就我们需要手动计算出对应的rem，繁琐且易出错，有没有工具可以辅助我们自动进行计算，我只要写px值就好了呢？当然是有的。

下面介绍一款插件flexible，它是手淘经过多年的摸索和实战，总结出的一套移动端适配方案，简单易上手，安装postcss-pxtorem 和 lib-flexible这两个插件，开发过程只需要写正常的px，打包时自动转为rem。

二、项目实践

1、安装

npm install lib-flexible --save

2、main.js中引入

import 'lib-flexible/flexible.js'

3、viewport设置 进入public下的index.html页面，自定义meta，该标签定义了用户通过手指放大缩小无效，页面比例始终为1:1

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

4、安装专门用来自动计算rem的插件

npm install postcss-pxtorem --save

5、在项目目录下的postcss.config.js添加配置代码

module.exports = {  
  plugins: {  
    autoprefixer: {},  
    'postcss-pxtorem':{  
        //设计稿对应的rem尺寸，此时是iPhone6对应的75px  
      rootValue:75,  
        //所有元素的px自动转化成rem  
      propList:['*']  
    }  
  },  
};

解释下根元素的值为什么是75？？？

因为Flexible会将设计稿分成100份（主要是为例以后能更好的兼容vh和vw），而每一份被称为一个单位a；同时1rem单位被认定为10a，我们可以得出： （以750*1334设计稿为例）

1a = 7.5px
1rem = 75px