vue中使用rem布局代碼詳解
1、npm i amfe-flexible
2、import ‘a(chǎn)mfe-flexible‘
然后再，安裝postcss-px2rem插件
npm i postcss-px2rem
在package.json中配置
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem": {
"remUnit": 26.7
}
}
}
在vue項(xiàng)目中使用rem布局簡(jiǎn)易教程
rem布局由于其根據(jù)屏幕寬度的改變修改相應(yīng)的rem與px的轉(zhuǎn)換比例，這樣非常適合移動(dòng)端的項(xiàng)目。
在不同的分辨率下，都會(huì)有較好的顯示效果。
在使用rem布局的時(shí)候需要引入flexible.js。
js會(huì)根據(jù)屏幕的寬度計(jì)算html的根字體大小
在vue項(xiàng)目中只需要安裝raziel-flex模塊引用就行
安裝方法
npm install raziel-flex
引用方法（在main.js中引用）
import flex from 'raziel-flex' flex(600); //傳入值為頁(yè)面變化最大寬（px）
引用時(shí)會(huì)需要傳入一個(gè)參數(shù)，布局變化的最大寬，當(dāng)大于這個(gè)值時(shí)模塊便不再修改html根字體的大小。
模塊修改的根字體的大小等于屏幕寬度除以10；
vacode編輯器安裝remcss插件使用時(shí)更方便。
以上就是本次介紹的全部知識(shí)點(diǎn)，感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。
相關(guān)文章
解決vue+element 鍵盤(pán)回車(chē)事件導(dǎo)致頁(yè)面刷新的問(wèn)題
今天小編就為大家分享一篇解決vue+element 鍵盤(pán)回車(chē)事件導(dǎo)致頁(yè)面刷新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue3鼠標(biāo)經(jīng)過(guò)顯示按鈕功能的實(shí)現(xiàn)
本篇文章介紹了如何使用 Vue3 實(shí)現(xiàn)一個(gè)鼠標(biāo)經(jīng)過(guò)顯示按鈕的效果,我們使用了 Vue3 的 Composition API 來(lái)創(chuàng)建響應(yīng)式的數(shù)據(jù),并使用了?@mouseover?和?@mouseleave?事件來(lái)監(jiān)聽(tīng)鼠標(biāo)的移入和移出事件,感興趣的朋友一起看看吧2024-04-04
Vue.js項(xiàng)目在apache服務(wù)器部署問(wèn)題解決
本文主要介紹了Vue.js項(xiàng)目在apache服務(wù)器部署問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue.js this.$router.push獲取不到params參數(shù)問(wèn)題
這篇文章主要介紹了vue.js this.$router.push獲取不到params參數(shù)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)
當(dāng)我們遇到定位展示的時(shí)候會(huì)出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue Tab切換以及緩存頁(yè)面處理的幾種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了js數(shù)組的 entries() 獲取迭代方法，entries() 方法返回一個(gè)數(shù)組的迭代對(duì)象，該對(duì)象包含數(shù)組的鍵值對(duì) (key/value)。下面來(lái)詳細(xì)介紹該neural,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了淺談Vue知識(shí)系列-axios，本文章內(nèi)容詳細(xì)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，需要的朋友可以參考下<BR>2023-01-01
這篇文章主要介紹了vue之監(jiān)聽(tīng)器的使用案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09