postcss.config.js 动态配置基准值

在Vue项目中引入PostCSS可以实现不同分辨率的自适应，通常在H5项目中使用

1. 安装插件

npm install --save-dev postcss postcss-loader autoprefixer

2. 新建postcss.config.js文件，添加下列配置项

module.exports = {plugins: {'postcss-px-to-viewport': {unitToConvert: 'px', // 要转换的单位viewportWidth: 750, // 设计稿宽度unitPrecision: 5, // 单位转换后保留的精度propList: ['*'], // 指定转换那些属性，*表示全部viewportUnit: 'vw', // 希望使用的视口单位fontViewportUnit: 'vw', // 字体使用的视口单位selectorBlackList: [], // 要忽略的选择器minPixelValue: 1, // 最小的转换数值mediaQuery: false, // 是否在媒体查询中也转换pxreplace: true, // 是否直接更换属性值exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或者某些特定文件}}
}

3. 如果一个H5项目，即有移动端的页面，又有PC端的页面，且为不同迟勋的设计稿，移动端的H5需要根据屏幕进行自适应，而PC端不需要进行自适应，或者因为设计稿不同，设置的基准值和移动端不是同一个。这种情况下可以通过文件路径去判断我们要设置什么样的基准值了

module.exports = ((value) => {// 不让页面随屏幕的变化而变大变小的文件名称let originalSizePage = ['homePc']// 文件路径，包括文件名称let path = value.webpack.resourcePath// 该文件是否要设置基准值(是否要根据屏幕分辨率去缩放)let isOriginalSize = falseif(path){originalSizePage.forEach(name => {if(path.includes(name)){isOriginalSize = true}})}// console.log("**webpack: --" , path, isOriginalSize)if(isOriginalSize){// 不需要缩放return {}}else{// 需要缩放return {plugins: {'postcss-px-to-viewport': {unitToConvert: 'px', // 要转换的单位viewportWidth: 750, // 设计稿宽度, 可以根据文件名称不定义不同的宽度 flag ? 1920 : 750unitPrecision: 5, // 单位转换后保留的精度propList: ['*'], // 指定转换那些属性，*表示全部viewportUnit: 'vw', // 希望使用的视口单位fontViewportUnit: 'vw', // 字体使用的视口单位selectorBlackList: [], // 要忽略的选择器minPixelValue: 1, // 最小的转换数值mediaQuery: false, // 是否在媒体查询中也转换pxreplace: true, // 是否直接更换属性值exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或者某些特定文件}}}}
})