副标题：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
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里写多少；
如果还是看不明白上面的文字意思，请看下图（一图胜过千言万语，哈哈哈！）：
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4383/viewspace-2810829/ ，如需转载，请注明出处，否则将追究法律责任。
下一篇：
nginx切割日志脚本（python）
请登录后发表评论
登录
全部评论
