8.rem和lib-flexible解决手机适配

一、关于lib-flexible.js

flexible方案是手淘经过多年的摸索和实战，总结出的一套移动端适配方案。

二、项目中使用

1、安装

$ npm install lib-flexible --save

2、main.js中引入

import 'lib-flexible/flexible.js'

3、viewport设置
我们进入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、安装px2rem插件
px2rem插件是一个把px转换为rem的工具

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

1a = 7.5px
1rem = 75px