手把手教你如何在vue項(xiàng)目中使用rem布局
更新時間：2023年02月08日 11:35:55 作者：H-hang
公司內(nèi)部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒有認(rèn)真的來總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于如何在vue項(xiàng)目中使用rem布局的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
如何在vue項(xiàng)目中使用rem布局
場景：
在我們開發(fā)移動端項(xiàng)目中，實(shí)現(xiàn)手機(jī)頁面布局，需要使用rem布局，那么該如何使用呢？
本文就詳細(xì)的講解了在vue項(xiàng)目中使用rem布局的整個過程，可以仔細(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';
}
//窗口大小變化的時候執(zhí)行
window.onresize = setHtml;
//頁面初始加載時也要觸發(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
要想實(shí)現(xiàn)列表的動態(tài)無縫滾動,本文為大家推薦兩款組件,vue-seamless-scroll和vue3-seamless-scroll,組件的用法也非常簡單,下面就跟隨小編一起來學(xué)習(xí)一下吧2024-11-11
這篇文章主要介紹了Vue 實(shí)現(xiàn)手動刷新組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue3中v-for報錯'item'is?of?type'unknown'的
在寫vue3+ts的項(xiàng)目,得到一個數(shù)組,需要循環(huán)展示,使用v-for循環(huán),寫完之后發(fā)現(xiàn)有個報錯,接下來通過本文給大家介紹vue3中v-for報錯?‘item‘?is?of?type?‘unknown‘的解決方法,感興趣的朋友一起看看吧2023-11-11
vue3?組件與API直接使用的方法詳解(無需import)
這篇文章主要介紹了vue3?組件與API直接使用的方法(無需import)，主要包括vue3自動導(dǎo)入和API的自動引入問題，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
以前我們經(jīng)常在react中使用jsx,現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于在vue中寫jsx的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
循環(huán)使用v-for指令,v-for指令需要以site in sites形式的特殊語法,sites是源數(shù)據(jù)數(shù)組并且site是數(shù)組元素迭代的別名,下面這篇文章主要給大家介紹了關(guān)于Vue中v-for列表循環(huán)的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下載文件流完整前后端代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片裁剪后上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
Vue中的 nextTick 涉及到Vue中DOM的異步更新，感覺很有意思，特意了解了一下。其中關(guān)于 nextTick 的源碼涉及到不少知識，很多不太理解，暫且根據(jù)自己的一些感悟介紹下 nextTick2019-05-05
vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報
這篇文章主要介紹了vue-cli 打包后提交到線上出現(xiàn) "Uncaught SyntaxError:Unexpected token" 報錯，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11