当前位置：首页 > news >正文

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

news 来源：原创 2025/6/1 20:59:21

在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)(\/|\\)/, // 忽略某些文件夹下的文件或者某些特定文件
        }
      }
    }
  }
})