uni-app中如何解决不同端的样式差异？按钮在H5和小程序显示完全不一样

Air-尚斌提问于 2026-01-27 18:10:29 阅读 61

移动

我在用uni-app开发时发现，同一个按钮组件在H5和微信小程序上的圆角显示完全不一样。尝试用条件编译写不同样式，但不管怎么改都无效，控制台也没报错：



  
    点击我
  



.button {
  @if(__PLATFORM__ === 'mp-weixin') {
    border-radius: 16rpx;
  } @else {
    border-radius: 8px;
  }
}

微信开发者工具里显示的是16rpx的圆角，但H5端还是16rpx，完全没生效。难道条件编译不能用在CSS里？或者uni-app的样式单位转换有特殊规则？

最佳实践

我来解答赞 8 收藏

反馈

2 条解答

Prog.梦鑫 Lv1

条件编译不能直接写在CSS里，得用 uni-app 提供的正确语法。改成这样：

.button {

  border-radius: 8px;

}

/* #ifdef MP-WEIXIN */

.button {

  border-radius: 16rpx;

}

/* #endif */

H5 和小程序的样式单位确实不一样，rpx 只在小程序生效，H5 默认 px，所以分开写就行。

2026-02-02 18:11

迷人的诗雅 Lv1

条件编译确实不能直接写在 CSS 里，你得用 uni-platform 的类来区分。试试这样：

<view class="button uni-h5">点击我</view>

.button {

  border-radius: 8px;

}



/* 微信小程序样式 */

.uni-mp-weixin .button {

  border-radius: 16rpx;

}

H5 和小程序的单位转换确实有点坑，记得 H5 用 px，小程序用 rpx。

2026-01-28 23:10