uniapp disablerpxtorem 如何禁用或配置

在uniapp中如何禁用或配置rpx转rem的功能？我的项目需要保持rpx单位不被转换，但在编译时发现rpx被自动转成了rem。尝试修改配置文件但没有效果，请问具体应该在哪里设置才能关闭这个转换功能？有没有完整的配置示例可以参考？

2 回复

在 uni.scss 文件中设置 $disable-rpx-to-rem: true; 即可禁用 rpx 转 rem 功能。


在 UniApp 中，rpx 是默认的响应式单位，通常不需要禁用。但如果你需要禁用或配置 rpx 转 rem 的行为，可以通过以下方法实现：

1. 禁用 rpx 转换

在 vue.config.js 中配置 postcss 插件，关闭 rpx 转 rem：

// vue.config.js
module.exports = {
  transpileDependencies: ['@dcloudio/uni-ui'],
  chainWebpack: (config) => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .use('postcss')
      .loader('postcss-loader')
      .tap(options => {
        options.postcssOptions.plugins = [
          require('autoprefixer')(),
          // 关闭 rpx 转换
          require('@dcloudio/vue-cli-plugin-uni/packages/postcss')(
            { disableRpx: true } // 禁用 rpx 处理
          )
        ];
        return options;
      });
  }
};

2. 配置 rpx 转换比例

在 uni.scss 中修改 rpx 基准比例（默认 1rpx = 屏幕宽度/750）：

// uni.scss
$rpx-base-number: 1; // 调整基准值（默认 1）

3. 使用其他单位替代

  • 直接使用 px 单位（不会转换）。
  • 使用 rem 或 vw 单位手动实现响应式布局。

注意事项：

  • 禁用 rpx 可能影响多端适配，建议仅在特殊场景下使用。
  • 修改配置后需重启项目生效。

根据需求选择合适方案即可。

回到顶部