需要注意的是,修改了vue.config.js文件的配置之后,需要重启项目才会生效
1.安装
npm install postcss-pxtorem --save
2.根目录新建vue.config.js
module.exports={
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px单位换算成rem单位
rootValue: 37.5, //换算基数,
unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
propList: ['*'],
exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
selectorBlackList: ['.van'], //要忽略并保留为px的选择器,本项目我是用的vant ui框架,所以忽略他
mediaQuery: false, //(布尔值)允许在媒体查询中转换px。
minPixelValue: 1 //设置要替换的最小像素值
})
]
}
}
}
}
3.配套使用rem.js
rem单位是以html的font-size作为基准实现页面尺寸布局的,那么这样子,如果根节点的font-size我们一直写死37.5px的话,页面的自适应便无法实现了。
为了达到不同的设备宽度对应不同的font-size样式,需要一个js文件,让它实时监听窗口的尺寸变化,从而改变font-size的值:
新建rem.js文件:
// 基准大小
const baseSize = 37.5
// 设置 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文件中引入即可:
//移动端rem适配文件
import './util/rem.js'