在 UniApp 开发中，由于需要跨平台（小程序、H5、App 等），样式兼容性是常见挑战

在 UniApp 开发中，由于需要跨平台（小程序、H5、App 等），样式兼容性是常见挑战。以下是常见问题及解决方案总结：

---

一、单位问题

1. 问题 ：px 在不同平台显示不一致（如 H5 与小程序）。
   • 解决 ：使用 rpx（响应式像素）作为主单位。设计稿按 750px 宽时，1px = 1rpx。
   • 注意 ：
     • App 端部分组件（如 map）需用 px。
     • 使用 uni.upx2px() 将 rpx 转 px 用于非样式场景。

---

二、样式作用域问题

1. 问题 ：scoped 样式在自定义组件中失效（如小程序）。
   • 解决 ：

     • 全局样式：写在 App.vue 或公共 CSS 文件。

     • 深度选择器：

       /* Vue2 */
       ::v-deep .custom-class { ... }
       
       /* Vue3 */
       :deep(.custom-class) { ... }

---

三、平台差异适配

1. 条件编译：

   /* #ifdef H5 */
   .h5-style { color: red; }
   /* #endif */
   
   /* #ifdef MP-WEIXIN */
   .wx-style { padding: 10rpx; }
   /* #endif */

2. 安全区域适配（刘海屏）：

   .safe-area {
     padding-bottom: env(safe-area-inset-bottom);
     padding-bottom: constant(safe-area-inset-bottom); /* 兼容旧版 */
   }

---

四、Flex 布局兼容性

1. 问题 ：部分平台（如旧版微信小程序）不支持 gap 属性。

   • 解决 ：用 margin 替代或使用 nth-child 选择器：

     .item:not(:last-child) {
       margin-right: 20rpx;
     }

---

五、定位与层级

1. 问题 ：position: fixed 在部分平台异常（如小程序内嵌 H5）。
   • 解决 ：
     • 小程序：确保元素在 <page> 根节点下。
     • App 端：检查是否被父元素 overflow:hidden 裁剪。
2. z-index 失效 ：
   • 检查父元素是否创建了层叠上下文（如设置 position）。

---

六、字体与图标

1. 自定义字体 ：
   • H5/App：使用 @font-face。
   • 小程序：需将字体文件转为 base64 或使用网络链接。
2. 图标方案 ：
   • 推荐使用 uni-icons 组件或 iconfont 符号字体（注意路径兼容）。

---

七、边框与阴影

1. 1px 边框变粗 ：

   .thin-border {
     border: 1rpx solid #ddd; /* 使用 rpx */
     transform: scaleY(0.5); /* 或 CSS 缩放方案 */
   }

2. box-shadow 不支持 ：

   • 小程序可用 wxss 的 box-shadow，但部分 Android 机可能失效，备选方案：使用带阴影的图片。

---

八、背景图片路径

1. 问题 ：相对路径在小程序中可能解析失败。
   • 解决 ：
     • 使用绝对路径：/static/bg.png。
     • 网络图片链接。
     • Base64 编码（小图适用）。

---

九、组件库样式覆盖

1. 修改 UI 库样式 ：

   • 通过 :deep() 穿透作用域：

     :deep(.u-btn) { border-radius: 0; }

   • 或全局修改：在 App.vue 中引入覆盖样式文件。

---

十、其他常见坑

1. 按钮样式重置 ：

   button {
     padding: 0;
     background: none;
     line-height: inherit;
     &::after { border: none; } /* 去除小程序默认边框 */
   }

2. 输入框 placeholder 样式 ：

   input::-webkit-input-placeholder { color: #999; }
   input::placeholder { color: #999; }

3. 滚动穿透 ：

   • 弹窗时禁用页面滚动：

     document.body.style.overflow = 'hidden'; // H5
     uni.pageScrollTo({ scrollTop: 0 }); // 小程序

---

最佳实践

1. 统一使用 rpx + Flex 布局 + 条件编译。

2. 复杂组件使用 多端差异化开发 ：

   // 脚本中条件编译
   // #ifdef H5
   import H5Component from './h5-comp.vue';
   // #endif

3. 使用 CSS 变量 管理主题色：

   :root { --main-color: #007AFF; }
   .text { color: var(--main-color); }

---

通过预判平台差异、合理使用 UniApp 的编译机制和 CSS 技巧，可显著提升样式兼容性。开发时建议 真机多端测试 及早发现问题。