vue前端项目基于淘宝lib-flexible做手机端适配

项目中引入lib-flexible插件

1、通过npm命令导入

1）在命令窗口进入项目目录执行：npm install lib-flexible --save

2）在项目的main.js中引入lib-flexible：import 'lib-flexible'

2、修改meta属性

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

具体属性值如下：

width：设置layout viewport的宽度,可以为一个正整数，也可以设置为device-width表示取当前设备的宽度，rem会根据此宽度做适配所以通过此宽度计算px转换为rem后的值，例如：假如屏幕默认宽度为750px，flexible默认将屏幕分为100份，1rem=10份，换算下来铺满屏幕需要10rem那么750px就等于10rem，所以rem的换算比例为750/10=75，那么设置一个字体的font-size=15px时转换为rem就为0.2rem。

initial-scale：设置页面的初始缩放值，为一个数字，可以带小数点

minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数点，因为这里我禁掉了缩放所以没有使用该属性

maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数点，因为这里我禁掉了缩放所以没有使用该属性

height：设置layout viewport的高度，这个属性很少使用

user-scalable：是否允许用户进行缩放，“no”为不允许，“yes”为允许，应为浏览器默认会将页面放大所以这里禁止缩放

3、需要注意的点

一般ui设计人员的设计稿都基于640px和750px宽度为准，所以当默认宽度为750px时，px换算为rem的基数为75，至于为什么为640px和750px可以参考文章：https://www.jianshu.com/p/07669cb3e7c5

4、px自动转换为rem

可以通过webpack 的 px2rem-loader,自动将px转换为rem，这里还没有做过尝试，先在此做个记录。