1. rem适配
1.1 安装postcss-plugin-px2rem (推荐) ，也可使用官网的 postcss-pxtorem
npm i postcss-plugin-px2rem --save
1.2 postCss配置
// vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
// 换算基数， 默认100，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了。
rootValue: 75,
unitPrecision: 2, // 允许REM单位增长到的十进制数字。
propWhiteList: [], // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
propBlackList: [], // 黑名单
// 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
exclude: /(node_module)/,
selectorBlackList: [], // 要忽略并保留为px的选择器
ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
},
stylus: {
'resolve url': true,
'import': []
}
}
}
}
1.3 设置rem基准值
npm i -S amfe-flexible
1.4 引入ren基准值
// main.js中
import 'amfe-flexible'
2. vw适配
2.1 安装postcss-px-to-viewport
npm i postcss-px-to-viewport -D
2.2 在项目根目录下添加.postcssrc.js文件
const path = require('path')
module.exports = ({ webpack }) => {
const designWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750
return {
plugins: {
autoprefixer: {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-px-to-viewport': {
unitToConvert: 'px', // 要转化的单位
viewportWidth: 375, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: [], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
exclude: [], // 设置忽略文件，用正则做目录名匹配
landscape: true, // 是否处理横屏情况
landscapeUnit:'vw', // 横屏时使用的单位
landscapeWidth: 750 // 横屏时使用的视口宽度
}
}
}
}
2.3 参考文章
移动端布局之postcss-px-to-viewport
