cli创建的uni-app使用rpx单位开发时运行为h5端未进行单位转换px/rem/em

cli创建的uni-app使用rpx单位开发时运行为h5端未进行单位转换px/rem/em

信息类型 详情
产品分类 uniapp/H5
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 13.2.1
浏览器平台 Chrome
浏览器版本 118.0.5993.70
项目创建方式 CLI
CLI版本号 ~5.0.0

操作步骤：

<view>  
    <view class="icon">  
    </view>  
</view>  

<style>  
    .icon {  
    height:60rpx;  
    width:60rpx;  
    background:red;  
        margin-top: 33rpx;  
    }  
</style>

预期结果：

<view>  
    <view class="icon">  
    </view>  
</view>  

<style>  
   // 转换为h5应该是要不转成px 或者rem 之类的 但实际上不是  
    .icon {  
    height:60rpx;  
    width:60rpx;  
    background:red;  
        margin-top: 33rpx;  
    }  
</style>

实际结果：

<view>  
    <view class="icon">  
    </view>  
</view>  

<style>  
    .icon {  
    height:60rpx;  
    width:60rpx;  
    background:red;  
        margin-top: 33rpx;  
    }  
</style>

bug描述：

使用rpx单位开发的项目，在微信小程序运行没问题，运行为h5端 即执行 npm run dev:h5时，出现单位未自动转换问题，示例如附件

Image 1 Image 2 Image 3


更多关于cli创建的uni-app使用rpx单位开发时运行为h5端未进行单位转换px/rem/em的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

cli版本号多少

更多关于cli创建的uni-app使用rpx单位开发时运行为h5端未进行单位转换px/rem/em的实战教程也可以访问 https://www.itying.com/category-93-b0.html


cli版本 @vue/cli 5.0.8

回复 史鹏程: @dcloudio/uni-app的版本

回复 YUANRJ: “@dcloudio/uni-app”: “^2.0.2-3081220230817001”, “@dcloudio/uni-app-plus”: “^2.0.2-3081220230817001”, “@dcloudio/uni-h5”: “^2.0.2-3081220230817001”,

回复 史鹏程: 我这里未复现，提供下测试工程吧

这是一个常见的rpx单位转换问题。在H5端，uni-app默认会将rpx转换为rem单位，但需要确保以下几点：

  1. 检查项目根目录下的postcss.config.js文件是否存在且配置正确。该文件应包含以下内容：
module.exports = {
  plugins: {
    'postcss-import': {},
    'autoprefixer': {},
    '[@dcloudio](/user/dcloudio)/uni-app': {
      rpx: {
        designWidth: 750
      }
    }
  }
}
  1. 确保项目依赖中安装了必要的postcss插件：
npm install postcss-import autoprefixer [@dcloudio](/user/dcloudio)/uni-app -D
回到顶部