uni-app中postcss-px-to-viewport开发环境对uni.showModal有效

有什么问题吗？pc端应该按照px进行处理，保持不同分辨率统一样式。而移动端的尺寸应该相对于屏幕的宽度

回复 杨杨得亿: 用的都是h5测试的，打包后用的是electron测试的，放服务器上直接打开网页也是不行

在uni-app中使用postcss-px-to-viewport插件主要是为了实现px单位到viewport单位的转换，从而适配不同屏幕尺寸。uni.showModal是一个用于显示模态对话框的API，其样式和大小通常是由框架本身控制的，而不是由我们直接通过CSS样式来定义的。因此，postcss-px-to-viewport对uni.showModal的直接影响是微乎其微的，因为uni.showModal的样式通常是由uni-app框架内部处理。

不过，理解如何在uni-app项目中配置和使用postcss-px-to-viewport仍然是非常重要的，以确保你的自定义样式能够正确地适配不同设备。下面是一个基本的配置示例：

1. 安装postcss-px-to-viewport

首先，你需要安装postcss-px-to-viewport插件。如果你使用的是npm或yarn，可以运行以下命令：

npm install postcss-px-to-viewport --save-dev
# 或者
yarn add postcss-px-to-viewport --dev

2. 配置postcss.config.js

在项目的根目录下创建或编辑postcss.config.js文件，添加以下配置：

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 需要转换的单位
      viewportWidth: 750, // 设计稿的宽度
      unitPrecision: 5, // px转换成vw的小数位数
      propList: ['*'], // 指定需要转换的属性，*代表全部属性
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 选择器黑名单，不需要转换的选择器
      minPixelValue: 1, // 设置最小的转换数值，如果数值小于该值则不进行转换
      mediaQuery: false, // 允许在媒体查询中转换px
      replace: true, // 是否直接替换掉px
      exclude: /node_modules/ // 设置忽略文件，用正则表达式匹配路径
    }
  }
};

3. 使用自定义样式

在你的uni-app项目中，你可以继续使用px单位编写样式，postcss-px-to-viewport会在构建时自动将其转换为vw单位。例如：

.container {
  width: 375px; /* 这将被转换为vw单位 */
  height: 200px; /* 同上 */
}

总结

尽管postcss-px-to-viewport对uni.showModal的直接影响有限，但它在确保你的自定义样式能够跨设备适配方面发挥着重要作用。通过正确的配置和使用，你可以确保你的uni-app项目在各种屏幕尺寸上都能提供良好的用户体验。