下包
cnpm install postcss-pxtorem -D
新建rem文件
// 基准大小
const baseSize = 75 // 设置 rem 函数
function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem() // 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
main.js引入
import './rem'
在项目的根目录下找到.postcssrc.js文件在文件内添加以下代码，一般750px的设计稿的根元素大小设置32.
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
//rem设置
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
"postcss-pxtorem": { "rootValue": 37.5, "propList": ["*"] },
}
}
vue-cli3.0中配置
// css预设器配置项
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 32, // 换算的基数
selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
propList: ['*'],
}),
]
}
}
