postcss-px-to-viewport，谷歌和火狐表现不一致的优化

`postcss-px-to-viewport` 是一个将 CSS 中的像素值转换为视口单位（Viewport Units）的 PostCSS 插件。它的主要作用是帮助开发者更方便地适配不同屏幕尺寸的设备，从而提高网站或应用的兼容性和用户体验。

关于谷歌和火狐表现不一致的问题，可能是因为它们对视口单位的计算方式不同。具体来说，Chrome 和 Safari 会将 1vh 视为屏幕高度的 1%，而 Firefox 则会将 1vh 视为视口高度的 1%。这就导致在使用 `postcss-px-to-viewport` 插件时，可能会出现在不同浏览器中显示不一致的情况。

为了解决这个问题，我们可以使用 `postcss-viewport-units` 插件，它可以将视口单位转换为与浏览器一致的值。具体来说，它会将 `1vh` 转换为 `calc(var(--vh, 1vh) * var(--vh-scale))`，其中 `--vh` 和 `--vh-scale` 是自定义 CSS 变量。

例如，我们可以在 CSS 中这样定义变量：

:root {
  --vh: 1vh;
  --vh-scale: 1;
}

然后在 `postcss-viewport-units` 插件中使用 `replace` 选项来替换视口单位：

const postcssViewportUnits = require('postcss-viewport-units');

module.exports = {
  plugins: [
    require('postcss-px-to-viewport')({
      viewportWidth: 750,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore'],
      minPixelValue: 1,
      mediaQuery: false,
    }),
    postcssViewportUnits({
      replace: {
        '--vh': '100vh',
        '--vh-scale': 'calc(var(--vh) / 100)',
      },
    }),
  ],
};

这样，在不同浏览器中就可以得到一致的显示效果了。