lib-flexible + rem 适配移动端

[AurorePaladin]

一、安装

npm install lib-flexible --save

二、引入

在main.js中导入

import 'lib-flexible/flexible.js'

三、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">

注：也可以不设置 name="viewport" 的 <meta> 标签，lib-flexible会自动添加。

四、安装 px2rem-loader 插件

npm install px2rem-loader --save-dev

五、配置 px2rem-loader

在 build 目录下 utils.js 里定义 px2remLoader

const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}

注1：remUnit 为基准比例，一般为设计稿 width 的 1/10，如果设计稿 width 为 375px，则remUnit = 375/10 = 37.5  ( 1rem = 37.5px )，若 width = 750px，则 remUnit = 75 ( 1rem =75px );
注2：如果做h5页面时运用到vux组件库，建议使用cssrem，否则px2rem-loader会导致vux组件变形，引发各种兼容问题。

六、建议

目前各主流浏览器更好的支持 viewport 适配移动端的方式，而 lib-flexible 已被弃用（但对新手特别友好），更建议去使用 viewport + flex布局。