postcss-px-to-viewport 配置

### 回答1：
postcss-px-to-viewport 是一个 PostCSS 插件，用于将 px 单位转换为视口单位（如 vw、vh、vmin 或 vmax）。它可以帮助开发者在不同设备上实现更好的响应式布局。该插件的配置包括以下几个参数：

- viewportWidth：视口宽度，一般设置为设计稿的宽度，单位为 px。
- viewportHeight：视口高度，一般设置为设计稿的高度，单位为 px。
- unitPrecision：转换后的视口单位保留的小数位数，默认为 5。
- viewportUnit：转换后的视口单位，可选值为 vw、vh、vmin 或 vmax。
- selectorBlackList：不需要转换的 CSS 选择器，可以是字符串或正则表达式。
- minPixelValue：需要转换的最小像素值，默认为 1。
- mediaQuery：是否在媒体查询中也进行转换，默认为 false。

以上是 postcss-px-to-viewport 的基本配置，根据实际需求可以进行相应的调整。

### 回答2：
postcss-px-to-viewport 是一个 PostCSS 插件，将 CSS 中的 px 单位转换为 vw/vh 单位，实现视口适配。它的优点是使用原有的 px 单位进行开发和设计，而无需关心具体设备的屏幕尺寸和像素密度，同时也能保证页面在各种屏幕上都能保持一致的布局效果。

在配置 postcss-px-to-viewport 时，主要需要设置以下几个参数：

1. viewportWidth：视口宽度，单位为 px，一般为设计稿的实际像素宽度。默认值为 375。

2. viewportHeight：视口高度，单位为 px，一般可不设置，默认为 null。

3. unitPrecision：转换后保留的小数点位数，默认为 5。

4. viewportUnit：转换后的单位，可选 vw，vh 或 %。

5. selectorBlackList：需要忽略转换的 CSS 选择器，可以是字符串或正则表达式。

6. minPixelValue：最小转换的像素值，低于该像素值的 CSS 属性不进行转换，默认为 1。

7. mediaQuery：是否在媒体查询中转换 px 单位，默认为 false。

例如，常见的 postcss-px-to-viewport 配置如下：

module.exports = {
  plugins: [
    require('postcss-px-to-viewport')({
      viewportWidth: 750,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore'],
      minPixelValue: 1,
      mediaQuery: false,
    })
  ]
}

这里我们将视口宽度设置为 750px，转换单位为 vw，忽略选择器中的 .ignore 类名，最小转换值为 1px，且不在媒体查询中进行 px 转换。配置完成后，我们就可以愉快地使用 px 单位进行开发和设计了。

### 回答3：
postcss-px-to-viewport 是一个将 px 单位转换为 viewport 单位的插件，可用于自适应布局。

安装配置方式：

1. 安装插件

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

2. 配置 webpack.config.js 文件

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            plugins: [
              [
                'postcss-px-to-viewport',
                {
                  viewportWidth: 750, // 设计稿宽度
                  viewportHeight: 1334, // 设计稿高度
                  unitPrecision: 3, // 转换后的小数位数
                  viewportUnit: 'vw', // 转换后使用的单位
                  selectorBlackList: ['.ignore', '.hairlinetop', '.hairlinebottom'], // 需要忽略的选择器
                  minPixelValue: 1, // 最小转换的像素值
                  mediaQuery: false, // 允许在媒体查询中转换，需要注意的是，该配置为 false 会影响媒体查询的正确性
                  exclude: /(node_modules)/, // 不需要转换的文件路径正则
                },
              ],
            ],
          },
        },
      },
    ],
  },
  // ...
};

3. 配置项参数说明

viewportWidth：设计稿宽度，单位为像素。

viewportHeight：设计稿高度，单位为像素。

unitPrecision：转换后的小数位数，默认为 5。

viewportUnit：转换后使用的单位，默认为 vw。

selectorBlackList：需要忽略的选择器，如 '.ignore'、'.hairlinetop'、'.hairlinebottom' 等。

minPixelValue：最小转换的像素值，默认为 1。

mediaQuery：允许在媒体查询中转换，默认为 false，如果设置为 true，则会影响媒体查询的正确性。

exclude：不需要转换的文件路径正则，如 /(node_modules)/。

使用说明：

在 CSS 中使用 px 单位，例如：

h1 {
  font-size: 28px;
  line-height: 42px;
  margin-bottom: 10px;
}

经过 postcss-px-to-viewport 插件转换后，将会自动转化为 vw 单位，例如：

h1 {
  font-size: 3.733vw;
  line-height: 5.6vw;
  margin-bottom: 1.333vw;
}

总结：postcss-px-to-viewport 插件可将 px 值自动转换为 vw 单位，从而实现自适应布局。不仅节省了编写繁琐的媒体查询的时间，而且在不同像素密度的屏幕上都能保持统一的效果。在实际使用中，需要结合设计稿的宽度和高度进行配置。