postcss-px-to-viewport 判断设备

postcss-px-to-viewport是一个CSS后置处理器，用于将px单位转换为viewport单位（vw、vh、vmin、vmax），以实现移动端适配。它可以根据设备的宽度来动态计算和转换CSS中的像素值，从而实现响应式布局。

要判断设备类型，可以使用媒体查询@media来根据设备的宽度或高度来应用不同的样式。在使用postcss-px-to-viewport时，可以通过设置配置项来指定转换的基准设备宽度，然后根据不同的设备宽度来应用不同的样式。

以下是一个示例配置文件postcss.config.js的内容：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750, // 基准设备宽度
      unitPrecision: 5, // 转换后的小数位数
      viewportUnit: 'vw', // 转换的单位
      selectorBlackList: [], // 需要忽略的CSS选择器，可以是字符串或正则表达式
      minPixelValue: 1, // 小于或等于1px不转换
      mediaQuery: false // 是否在媒体查询中转换px
    }
  }
}

在上述配置中，viewportWidth指定了基准设备的宽度为750px，viewportUnit指定了转换的单位为vw。根据不同的设备宽度，postcss-px-to-viewport会自动将CSS中的像素值转换为对应的viewport单位。

通过使用postcss-px-to-viewport和媒体查询，可以实现根据设备类型来应用不同的样式，从而实现移动端适配。