手把手教你如何在vue項(xiàng)目中使用rem布局
如何在vue項(xiàng)目中使用rem布局
場(chǎng)景：
在我們開(kāi)發(fā)移動(dòng)端項(xiàng)目中，實(shí)現(xiàn)手機(jī)頁(yè)面布局，需要使用rem布局，那么該如何使用呢？
本文就詳細(xì)的講解了在vue項(xiàng)目中使用rem布局的整個(gè)過(guò)程，可以仔細(xì)閱讀哦！
方法：
（1）使用lib-flexbile
（2）使用postcss-pxtorem
注意：
兩種方法選其一使用哦，避免沖突！! !
方法一：使用lib-flexible
1. 安裝包
npm i lib-flexible
2. 引入文件
在main.js（入口）中引入js文件 --- import 'lib-flexible/flexible.js'
3. 根據(jù)需要設(shè)置rem
在node_modules文件中找flexible設(shè)置rem
為了方便可以設(shè)置rem為 width / 37.5
相當(dāng)于1rem=10px
4.使用rem
//比如設(shè)置p標(biāo)簽字體大小為24px
p {
font-size:2.4rem
}方法二：使用postcss-pxtorem
1. 安裝包
//安裝 postcss-pxtorem npm i postcss-pxtorem -s
2. 創(chuàng)建rem.js文件
在src目錄新建rem文件夾（一般情況下可以創(chuàng)建util文件夾），新建rem.js，添加如下代碼
//兼容處理
function setHtml() {
//獲取設(shè)備寬度
var deviceWidth = document.documentElement.offsetWidth;
//給html標(biāo)簽設(shè)置fontSize，就是給rem賦值
document.documentElement.style.fontSize = deviceWidth / 375 * 10 + 'px';
}
//窗口大小變化的時(shí)候執(zhí)行
window.onresize = setHtml;
//頁(yè)面初始加載時(shí)也要觸發(fā)
setHtml();
3. 新建 .postcssrc.js
在項(xiàng)目根目錄新建 .postcssrc.js（注意 . 不要忘記加）,添加代碼如下:
module.exports = {
"plugins": {
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": ["*"]
}
}
}
4. 在main.js中引入
注意：路徑根據(jù)自己新建的文件夾為準(zhǔn)
import '@/rem/rem.js'
5. 設(shè)置body的font-size
html {
font-size: 10px; // 相當(dāng)于1rem = 10px
}
body {
font-size: 16px;
}
6. 可參照流程圖
以上就是vue如何使用rem適配的兩種方法
總結(jié)
到此這篇關(guān)于如何在vue項(xiàng)目中使用rem布局的文章就介紹到這了,更多相關(guān)vue項(xiàng)目使用rem布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)列表無(wú)縫動(dòng)態(tài)滾動(dòng)
要想實(shí)現(xiàn)列表的動(dòng)態(tài)無(wú)縫滾動(dòng),本文為大家推薦兩款組件,vue-seamless-scroll和vue3-seamless-scroll,組件的用法也非常簡(jiǎn)單,下面就跟隨小編一起來(lái)學(xué)習(xí)一下吧2024-11-11
Vue 實(shí)現(xiàn)手動(dòng)刷新組件的方法
這篇文章主要介紹了Vue 實(shí)現(xiàn)手動(dòng)刷新組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
vue3中v-for報(bào)錯(cuò)'item'is?of?type'unknown'的
在寫(xiě)vue3+ts的項(xiàng)目,得到一個(gè)數(shù)組,需要循環(huán)展示,使用v-for循環(huán),寫(xiě)完之后發(fā)現(xiàn)有個(gè)報(bào)錯(cuò),接下來(lái)通過(guò)本文給大家介紹vue3中v-for報(bào)錯(cuò)?‘item‘?is?of?type?‘unknown‘的解決方法,感興趣的朋友一起看看吧2023-11-11
vue3?組件與API直接使用的方法詳解(無(wú)需import)
這篇文章主要介紹了vue3?組件與API直接使用的方法(無(wú)需import)，主要包括vue3自動(dòng)導(dǎo)入和API的自動(dòng)引入問(wèn)題，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09
以前我們經(jīng)常在react中使用jsx,現(xiàn)在我們?cè)趘ue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于在vue中寫(xiě)jsx的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
循環(huán)使用v-for指令,v-for指令需要以site in sites形式的特殊語(yǔ)法,sites是源數(shù)據(jù)數(shù)組并且site是數(shù)組元素迭代的別名,下面這篇文章主要給大家介紹了關(guān)于Vue中v-for列表循環(huán)的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下載文件流完整前后端代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片裁剪后上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue中的 nextTick 涉及到Vue中DOM的異步更新，感覺(jué)很有意思，特意了解了一下。其中關(guān)于 nextTick 的源碼涉及到不少知識(shí)，很多不太理解，暫且根據(jù)自己的一些感悟介紹下 nextTick2019-05-05
vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)
這篇文章主要介紹了vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報(bào)錯(cuò)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11