手把手教你如何在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)文章
vue項(xiàng)目中路由跳轉(zhuǎn)頁面不變問題及解決
這篇文章主要介紹了vue項(xiàng)目中路由跳轉(zhuǎn)頁面不變問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼
我在做一個調(diào)用虛擬機(jī)錄屏的一個操作,需要在瀏覽器頁面上,點(diǎn)擊按鈕后,關(guān)閉當(dāng)前頁面里的某一個頁面,并且打開瀏覽器新頁面是虛擬機(jī)的頁面,本文給大家介紹vue 跳轉(zhuǎn)到其他頁面并關(guān)閉當(dāng)前頁面的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2023-09-09
這篇文章主要介紹了vue2?利用echarts?單獨(dú)繪制省份,首先引入所需要的第三方模塊，通過示例代碼給大家介紹的非常詳細(xì)，文章末尾給大家補(bǔ)充介紹了vue2.x結(jié)合echarts2實(shí)現(xiàn)顯示具體省份熱力圖的問題，需要的朋友可以參考下2022-01-01
我們在開發(fā)vue項(xiàng)目的時候，創(chuàng)建的時候可能會不小心選擇了eslint，所以如果不想讓eslint檢測，我們該怎么辦呢，本文就詳細(xì)的介紹了幾種關(guān)閉方法，感興趣的可以了解一下2021-12-12
本文主要介紹了vuex命名空間的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vuejs第十一篇組件之slot內(nèi)容分發(fā)實(shí)例詳解
這篇文章主要介紹了Vuejs第十一篇之slot內(nèi)容分發(fā)組件詳解的相關(guān)資料2016-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js列表渲染綁定jQuery插件的正確姿勢，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
vue 監(jiān)聽是否切屏和開啟小窗的實(shí)現(xiàn)過程
這篇文章主要介紹了vue 監(jiān)聽是否切屏和開啟小窗的過程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
本篇文章主要介紹了Vue 實(shí)用分頁paging實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
vue如何限制只能輸入正負(fù)數(shù)及小數(shù)
這篇文章主要介紹了vue如何限制只能輸入正負(fù)數(shù)及小數(shù),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07