下包
cnpm install postcss-pxtorem -D
新建rem文件
// 基準大小
const baseSize = 75 // 設(shè)置 rem 函數(shù)
function setRem () { // 當前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改雷滋。
const scale = document.documentElement.clientWidth / 750 // 設(shè)置頁面根節(jié)點字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem() // 改變窗口大小時重新設(shè)置 rem
window.onresize = function () {
setRem()
}
main.js引入
import './rem'
在項目的根目錄下找到.postcssrc.js文件在文件內(nèi)添加以下代碼晤斩，一般750px的設(shè)計稿的根元素大小設(shè)置32.
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
//rem設(shè)置
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
"postcss-pxtorem": { "rootValue": 37.5, "propList": ["*"] },
}
}
vue-cli3.0中配置
// css預設(shè)器配置項
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 32, // 換算的基數(shù)
selectorBlackList: ['weui', 'mu'], // 忽略轉(zhuǎn)換正則匹配項
propList: ['*'],
}),
]
}
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
