uni-app样式兼容需分层处理：基础单位用rpx，布局差异靠条件编译，全局默认样式须重置；rpx仅解决尺寸缩放，不解决各端CSS解析与默认样式差异。
直接说结论：uni-app 的样式兼容问题不能靠“一套代码跑三端”硬扛，必须分层处理——基础单位统一用 rpx，复杂布局和属性差异靠条件编译兜底，全局默认样式要主动重置。
为什么 rpx 不是万能的
很多人以为只要全项目用 rpx 就能一劳永逸，结果在抖音小程序里按钮错位、支付宝里阴影消失、H5 上 fixed 悬浮跑偏。根本原因不是 rpx 失效，而是各端对 CSS 的解析逻辑和默认样式完全不同：
- 微信小程序：
rpx换算最准，但不支持backdrop-filter、gap等新属性 - 抖音小程序：page 根节点默认带
8rpxmargin，字体强制加粗，fixed会随滚动偏移 - 支付宝小程序：flex 布局权重被改写，
box-shadow语法不兼容，v-show直接不支持 - H5 端：完整支持 CSS3，但 scoped 样式隔离可能干扰子组件样式注入
所以 rpx 只解决“尺寸缩放”，不解决“渲染行为差异”。
必须全局重置的三处默认样式
很多错位问题其实源于平台自带的默认边距或盒模型，不重置就等于在别人画好的框里强行套你的设计。
在 App.vue 的 <style></style> 区域加这三段（注意用条件编译）：
/* 所有小程序端根节点清空默认 margin/padding */
/* #ifdef MP */
page {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
/* #endif */
<p>/<em> 抖音小程序专属：清除 page 默认外边距 </em>/
/<em> #ifdef MP-TOUTIAO </em>/
page {
margin: 0rpx !important;
}
/<em> #endif </em>/</p><p>/<em> 支付宝小程序：重置 flex 容器默认行为 </em>/
/<em> #ifdef MP-ALIPAY </em>/
view, scroll-view, swiper {
display: flex;
flex-direction: column;
}
/<em> #endif </em>/这几行代码能解决 70% 的“莫名留白”和“flex 错乱”问题。
什么时候该用条件编译写样式
条件编译不是补丁，是精准控制。以下情况必须上 /* #ifdef */：
- 使用了某端不支持的 CSS 属性，比如
backdrop-filter或clip-path，H5 和 iOS App 支持，但多数小程序不支持 - 同一类名在不同端需要不同
padding或font-size，例如按钮在微信里用28rpx，抖音里因字体加粗需调成26rpx - 滚动行为差异：H5 可用
body { overflow: hidden }，小程序必须用@touchmove.stop.prevent+<scroll-view></scroll-view> - 伪类或选择器失效：小程序不支持
:nth-child、*::before等，得换为 class 控制
示例（按钮文字大小适配）：
.btn-text {
font-size: 28rpx;
}
/* #ifdef MP-TOUTIAO */
.btn-text {
font-size: 26rpx;
}
/* #endif */
/* #ifdef MP-ALIPAY */
.btn-text {
font-size: 30rpx;
}
/* #endif */容易被忽略的 BEM + scoped 组合陷阱
很多人开了 scoped 就以为样式不会污染，但在小程序里，scoped 编译后会加属性选择器（如 data-v-xxx），而某些原生组件（比如 <editor></editor>、<map></map>）内部结构无法被 scoped 影响，导致你写的样式压根没生效。
这时候得配合 BEM 命名 + 全局样式穿透：
- 避免用深度选择器
::v-deep（HBuilderX 3.9+ 已弃用），改用:deep(.ql-editor) - 给 editor 内容区单独加 class，比如
<editor class="my-editor"></editor>，再写:deep(.my-editor .ql-editor) - 所有自定义组件类名必须扁平，禁用多层嵌套选择器（如
.a .b .c），小程序编译时会丢弃
真正麻烦的从来不是写多少代码，而是哪一行该写在哪一端——漏掉一个 MP-TOUTIAO，抖音端就多出 8rpx 留白；少加一个 :deep()，editor 里的行高就永远调不对。
