副标题：vue-cli引入lib-flexible配合PxCook设计稿适配移动端项目
1.初始化vue项目 5-1.切换为
5-2. 单位选择：由于是做
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">
npm i -S lib-flexible
如果安装失败，请选择国内镜像CNPM安装
4.在main.js中引入lib-flexiblei 是install的简写
-S 是将依赖项安装在package.json里的dependencies中
-D 是将依赖项安装在package.json里的devDependencies中
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里写多少；
如果还是看不明白上面的文字意思，请看下图（一图胜过千言万语，哈哈哈！）：
点击查看更多内容
2人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦