vue如何使用rem適配
更新時間：2021年02月06日 16:56:32 作者：灰太狼的情與殤
這篇文章主要介紹了vue如何使用rem適配，幫助大家處理vue開發(fā)移動應(yīng)用時的兼容性問題，感興趣的朋友可以了解下
1.開發(fā)環(huán)境 vue
2.電腦系統(tǒng) windows10專業(yè)版
3.在使用vue開發(fā)移動端的過程中,我們會因?yàn)榧嫒菪远^疼,下面我來分享分享下面vue使用rem自適配,希望對你有所幫助。
4.廢話不多說,直接上操作:
//安裝 postcss-pxtorem npm i postcss-pxtorem -S
5.在src目錄新建rem文件夾,下面新建rem.js,添加如下代碼:
//基準(zhǔn)大小
const baseSize = 37.5
// 設(shè)置 rem 函數(shù)
function setRem() {
const salepro = document.documentElement.clientWidth / 750
// 當(dāng)前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改.
// 設(shè)置頁面根節(jié)點(diǎn)字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設(shè)置 rem
window.onresize = function () {
setRem()
}
6.在項目根目錄新建 .postcssrc.js,添加代碼如下:
module.exports = {
"plugins": {
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": ["*"]
}
}
}
注意:我在配置中,比例是1:1,也就是設(shè)計圖寬是750px,你在css中直接寫width:750px;就可以啦,不用進(jìn)行換算,是不是很棒。
7.在main.js中引入
import '@/rem/rem.js'
8.在vue模板中使用,css中添加如下代碼:
<style lang="scss" scoped>
.about {
width: 750px;
height: 100vh;
box-sizing: border-box;
background-color: blue !important;
.kk {
width: 350px;
height: 350px;
background-color: red;
}
}
</style>
9.效果圖如下:
10.本期的分享到了這里就結(jié)束啦,希望對你有所幫助,讓我們一起努力走向巔峰。
以上就是vue如何使用rem適配的詳細(xì)內(nèi)容，更多關(guān)于vue使用rem適配的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在vue中使用rules對表單字段進(jìn)行驗(yàn)證方式
這篇文章主要介紹了在vue中使用rules對表單字段進(jìn)行驗(yàn)證方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue發(fā)送驗(yàn)證碼計時器防止刷新實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue發(fā)送驗(yàn)證碼計時器防止刷新實(shí)現(xiàn)詳解，<BR>有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了vue的列表交錯過渡實(shí)現(xiàn)代碼示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue路由結(jié)構(gòu)可設(shè)一層方便動態(tài)添加路由操作
這篇文章主要介紹了vue路由結(jié)構(gòu)可設(shè)一層方便動態(tài)添加路由操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue中使用極驗(yàn)驗(yàn)證碼的方法（附demo）
這篇文章主要介紹了vue中使用極驗(yàn)驗(yàn)證碼的方法（附demo）本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
當(dāng)遍歷一個數(shù)組或枚舉一個對象進(jìn)行迭代循環(huán)展示時，就會用到列表渲染指令 v-for。這篇文章主要介紹了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以參考下2018-11-11
vue實(shí)現(xiàn)路由不變的情況下，刷新頁面操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)路由不變的情況下，刷新頁面操作,結(jié)合實(shí)例形式分析了vue路由不變的情況下刷新頁面具體原理、操作方法與相關(guān)注意事項,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細(xì)介紹了vue3.0翻牌數(shù)字組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue3中如何使用v-model高級用法參數(shù)綁定傳值
本文給大家介紹Vue3中使用v-model高級用法參數(shù)綁定傳值的相關(guān)知識,包括單個輸入框傳值和多個輸入框傳值,一個組件接受多個v-model值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
這篇文章主要介紹了vant中field組件label屬性兩端對齊問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05