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