一、将px转换为vw
安装 postcss-px-to-viewport
npm install postcss-px-to-viewport -D
yarn add postcss-px-to-viewport -D
配置移动端适配
在项目根目录下面新建文件postcss.config.js,然后将以下代码加入到文件内:
module.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
// 视窗的宽度,对应的是设计稿的宽度
viewportWidth: 375,
// 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
// viewportHeight: 1334,
// 指定`px`转换为视窗单位值的小数位数
unitPrecision: 3,
// 指定需要转换成的视窗单位,建议使用vw
viewportUnit: 'vw',
// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
selectorBlackList: ['.ignore'],
// 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
minPixelValue: 1,
// 允许在媒体查询中转换`px`
mediaQuery: false
}`在这里插入代码片`
}
}
配置完之后,重启服务,在浏览器中审查元素,可以看到原来写的px都转换成了vw
.home[data-v-5954443c]{
font-size:4.267vw;
}
二、将px转换为rem
安装 postcss-pxtorem
npm install postcss-pxtorem --save
修改 /build/utils.js 文件
找到 postcssLoader 的代码块
onst postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
修改为:
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap,
plugins: [
require('postcss-pxtorem')({
'rootValue': 75,
propList: ['*']
})
]
}
}
注意:本项目会自动把px自动转换成rem,不需要考虑移动端单位兼容性问题,单位直接用px即可,浏览器上会自动变成是rem。