文章序
設(shè)計稿給的是px，但是需要做自適應(yīng)员魏，老生常談的問題了丑蛤，使用flex布局+rem+按比例設(shè)置根節(jié)點font-size大小來實現(xiàn)，這里最麻煩的就是把px改寫成rem撕阎，手工改重復(fù)性太大受裹，所幸，可以使用webpack插件在打包過程中幫我們自動轉(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)前頁面寬度相對于 1920 寬的縮放比例，可根據(jù)自己需要修改镇匀。
const scale = document.documentElement.clientWidth / 1920
// 設(shè)置頁面根節(jié)點字體大小
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設(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不會轉(zhuǎn)換成rem
UI庫如果要改變樣式，在樣式的單位要使用rem
不想轉(zhuǎn)換成rem的話將px寫成PX
