HTML5移动端项目适配解决方案

副标题：vue-cli引入lib-flexible配合PxCook设计稿适配移动端项目 1.初始化vue项目 vue init webpack projectName

初始化项目失败的请看这里：vue init webpack Travel项目初始化失败的解决办法

2.设置index.html文件meta标签

index.html

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

3.NPM安装lib-flexible依赖 npm i -S lib-flexible

如果安装失败，请选择国内镜像CNPM安装

i 是install的简写
-S 是将依赖项安装在package.json里的dependencies中
-D 是将依赖项安装在package.json里的devDependencies中

4.在main.js中引入lib-flexible import 'lib-flexible' 5.使用PxCook打开UI给的设计稿：

5-1.切换为开发面板

5-2. 单位选择：由于是做移动端项目，当然是选择rem

5-3. 基数设置：

如果UI设计稿是基于640px设计的就将基数设置为64

如果UI设计稿是基于750px设计的就将基数设置为75

5-4. 小数点设置

一定要设置这个小数，否则适配会出问题（我现在设置的是两位小数点，设置三位小数也可以）

5-5. 完成

都设置好之后，鼠标在UI设计稿内移动或者点击某元素，它会显示出对应元素的rem值，它显示的rem值是多少就在CSS里写多少；

如果还是看不明白上面的文字意思，请看下图（一图胜过千言万语，哈哈哈！）：