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, // 是否在媒体查询中也转换px replace: true, // 是否直接更换属性值 exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或者某些特定文件 } } }

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

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