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