副标题: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里写多少;
如果还是看不明白上面的文字意思,请看下图(一图胜过千言万语,哈哈哈!):
點擊查看更多內(nèi)容
2人點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦