第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

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里写多少;

如果还是看不明白上面的文字意思,请看下图(一图胜过千言万语,哈哈哈!):

图片描述

點擊查看更多內(nèi)容
2人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領(lǐng)

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消