使用postcss-px-to-viewport的项目 如何使用固定的px样式

postcss-px-to-viewport是一个PostCSS插件，用于将px单位转换为vw或vh单位，以实现响应式布局。使用该插件可以方便地适配不同屏幕尺寸的设备。

要在项目中使用postcss-px-to-viewport，首先需要安装和配置PostCSS。然后，在PostCSS配置文件中添加postcss-px-to-viewport插件，并进行相应的配置。

以下是一个使用postcss-px-to-viewport的项目的示例配置：

1. 安装PostCSS和postcss-px-to-viewport插件：

npm install postcss postcss-px-to-viewport --save-dev

2. 创建PostCSS配置文件postcss.config.js，并添加以下内容：

module.exports = {
  plugins: [
    require('postcss-viewport')({
      viewportWidth: 750,  // 设计稿的宽度
      viewportHeight: 1334, // 设计稿的高度
      unitPrecision: 3,    // 转换后的小数位数
      viewportUnit: 'vw',  // 转换的单位
      selectorBlackList: ['.ignore'], // 需要忽略的类名
      minPixelValue: 1,    // 最小转换的像素值
      mediaQuery: false    // 是否允许在媒体查询中转换
    })
  ]
}

3. 在项目中使用固定的px样式，例如：

.container {
  width: 750px;
  height: 200px;
  font-size: 24px;
}

4. 运行PostCSS命令，将px单位转换为vw单位：

npx postcss input.css -o output.css

转换后的样式将会输出到output.css文件中，例如：

.container {
  width: 100vw;
  height: 26.67vw;
  font-size: 3.2vw;
}

这样，你就可以在项目中使用固定的px样式，并通过postcss-px-to-viewport插件将其转换为适应不同屏幕的vw单位样式。