postcss-px-to-viewport 横屏

postcss-px-to-viewport是一个用于将px单位转换为viewport单位的CSS后置处理器。它可以帮助开发者在移动端开发中解决适配问题。通过将px单位转换为vw、vh、vmin或vmax单位，可以根据设备的视口大小自动调整元素的大小。

要在横屏模式下使用postcss-px-to-viewport，你需要按照以下步骤进行操作：

1. 首先，确保你已经安装了postcss-px-to-viewport插件及其依赖项。你可以使用以下命令进行安装：

npm install postcss-px-viewport postcss-viewport-units postcss-preset-env -D

2. 在你的项目中创建一个postcss.config.js文件，并添加以下配置：

module.exports = {
  plugins: {
    'postcss-px-viewport': {
      viewportWidth: 1920, // 视口的宽度，根据实际情况进行调整
      viewportHeight: 1080, // 视口的高度，根据实际情况进行调整
      unitPrecision: 3, // 转换后的单位精度
      viewportUnit: 'vw', // 转换后的单位
      selectorBlackList: ['.ignore'], // 需要忽略的CSS选择器
      minPixelValue: 1, // 小于或等于1px不转换
      mediaQuery: false // 是否在媒体查询中转换px
    }
  }
}

3. 在你的CSS文件中使用px单位进行样式编写。postcss-px-to-viewport会自动将其转换为viewport单位。

现在，你可以在横屏模式下使用postcss-px-to-viewport来适配你的页面了。