Vue項(xiàng)目使用px2rem方法示例詳解
文章序
設(shè)計(jì)稿給的是px，但是需要做自適應(yīng)，老生常談的問(wèn)題了，使用flex布局+rem+按比例設(shè)置根節(jié)點(diǎn)font-size大小來(lái)實(shí)現(xiàn)，這里最麻煩的就是把px改寫成rem，手工改重復(fù)性太大，所幸，可以使用webpack插件在打包過(guò)程中幫我們自動(dòng)轉(zhuǎn)化
使用方法
1.安裝包
npm i postcss-px2rem
2.編寫配置文件
編寫核心代碼，命名隨意，我這里命名為px2rem并放在src/utils文件夾內(nèi)
// 基準(zhǔn)大小
const baseSize = 100
// 設(shè)置 rem 函數(shù)
function setRem() {
// 當(dāng)前頁(yè)面寬度相對(duì)于 1920 寬的縮放比例，可根據(jù)自己需要修改。
const scale = document.documentElement.clientWidth / 1920
// 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大小
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function() {
setRem()
}在main.js中引入剛才的文件
import "./utils/px2rem"
vue.config.js中引入px2rem包并在css plugins里啟用postcss插件
const px2rem = require('postcss-px2rem')
const postcss = px2rem({
remUnit: 100 //基準(zhǔn)大小 baseSize，需要和rem.js中相同
})
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
postcss
]
}
}
}
}
Tips
行內(nèi)樣式的px不會(huì)轉(zhuǎn)換成rem
UI庫(kù)如果要改變樣式，在樣式的單位要使用rem
不想轉(zhuǎn)換成rem的話將px寫成PX
以上就是Vue項(xiàng)目使用px2rem方法示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue使用px2rem的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue3中使用scss加上scoped導(dǎo)致樣式失效問(wèn)題
這篇文章主要介紹了vue3中使用scss加上scoped導(dǎo)致樣式失效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
解決vue 局部過(guò)濾器獲取不到this的問(wèn)題
這篇文章主要介紹了解決vue 局部過(guò)濾器獲取不到this的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
本篇文章主要介紹了用vue寫一個(gè)仿簡(jiǎn)書的輪播圖的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vuex中store存儲(chǔ)store.commit和store.dispatch的用法
這篇文章主要介紹了vuex中store存儲(chǔ)store.commit和store.dispatch的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue3.0+element表格獲取每行數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過(guò)為表格的行綁定單擊事件來(lái)獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下2023-09-09
解決vue前端rsa加密遇到的問(wèn)題message too long for RS
這篇文章主要介紹了解決vue前端rsa加密遇到的問(wèn)題message too long for RSA,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
在Vite中,我們可以使用環(huán)境變量來(lái)管理不同環(huán)境下的配置,本文主要介紹了vite環(huán)境變量.env文件的配置及使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
vue自定義指令和動(dòng)態(tài)路由實(shí)現(xiàn)權(quán)限控制
這篇文章主要介紹了vue自定義指令和動(dòng)態(tài)路由實(shí)現(xiàn)權(quán)限控制的方法，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-08-08
本文主要介紹了淺談Vue+Ant Design form表單的一些坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
mui-player自定義底部導(dǎo)航在vue項(xiàng)目中顯示不出來(lái)的解決
這篇文章主要介紹了mui-player自定義底部導(dǎo)航在vue項(xiàng)目中顯示不出來(lái)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12