uni-app 使用HBuilderX打包H5后rpx解析出现乱码font-size: %?22.265?%;

uni-app 使用HBuilderX打包H5后rpx解析出现乱码font-size: %?22.265?%;

开发环境 版本号 项目创建方式
Windows win10 1909 HBuilderX 
产品分类：uniapp/H5

浏览器平台：Chrome  
浏览器版本：89.0.4389.90  

App下载地址或H5网址：  
[http://www.lnomick.com/](http://www.lnomick.com/)  

bug描述：
使用HBuilderX打包H5后rpx解析出现乱码  

示例代码：
```css
.index-dh-b{ font-size: 22.26rpx; color: #000000; text-align: center; margin-top: 16.406rpx; letter-spacing: 2px; }

操作步骤：

.index-dh-b{ font-size: 22.26rpx; color: #000000; text-align: center; margin-top: 16.406rpx; letter-spacing: 2px; }

预期结果：

.index-dh-b[data-v-4220c50b] {
font-size: 11px;
color: #000000;
text-align: center;
margin-top: 8px;
letter-spacing: 2px;
}

实际结果：

.index-dh-b[data-v-4220c50b] {
font-size: %?22.265?%;
color: #000;
text-align: center;
margin-top: %?16.406?%;
letter-spacing: 2px;
}


更多关于uni-app 使用HBuilderX打包H5后rpx解析出现乱码font-size: %?22.265?%;的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

自顶

更多关于uni-app 使用HBuilderX打包H5后rpx解析出现乱码font-size: %?22.265?%;的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问解决了吗？我也遇到了这个问题

请问解决了吗？我也遇到了这个问题

请问解决了吗？同样的问题我也遇到了。

请问解决了吗？同样的问题有造成困扰

这是一个典型的rpx单位转换异常问题。在uni-app H5环境中，rpx单位应该按照屏幕宽度比例转换为px单位，但这里出现了%?22.265?%这样的乱码格式。

问题原因可能是：

  1. HBuilderX版本问题，建议升级到最新稳定版
  2. CSS预处理器配置异常
  3. 项目配置文件损坏

解决方案：

  1. 检查并更新HBuilderX到最新版本
  2. 清理项目缓存：菜单栏 运行 -> 运行到浏览器 -> 清除缓存并重新运行
  3. 检查项目根目录的postcss.config.js配置文件，确保rpx转换配置正确
  4. 尝试删除uni_modules、node_modules文件夹后重新安装依赖

临时替代方案： 可以直接使用px单位替代rpx，避免转换异常：

.index-dh-b{ 
  font-size: 11px; 
  color: #000000; 
  text-align: center; 
  margin-top: 8px; 
  letter-spacing: 2px; 
}
回到顶部