CSS在uni-app多端“失效”主因是平台渲染差异：小程序不支持后代选择器、伪元素及部分属性，rpx在fixed/transform场景计算异常，App端Weex引擎丢弃现代CSS特性，且条件编译不降级整条规则。
uni-app 的 CSS 在不同平台“失效”，通常不是代码没写对，而是你写的样式被平台编译器忽略、裁剪、重写，或者根本没进目标平台的渲染管线——比如微信小程序压根不认 .list .item span 这种后代选择器，H5 能跑，小程序直接静默丢弃。
为什么后代选择器和伪类在小程序里“消失”了
微信小程序 WXSS 不支持标准 CSS 中的后代选择器（.a .b）、属性选择器（[data-id]）、伪元素（::before）等。uni-app 编译时会原样保留这些写法，但小程序运行时直接跳过，不报错也不生效。
- 检查你的样式是否用了
.container .content p这类嵌套层级，换成带明确 class 的单层选择器，例如给p加个class="text-desc"，然后写.text-desc - 伪元素
::before/::after在小程序中不可用，改用额外的<view class="icon-before"></view>模拟 - 通配符
*、全局重置* { margin: 0; padding: 0; }也会被小程序忽略，要用具体类名逐个重置
为什么 rpx 在 fixed 定位或 transform 场景下表现异常
rpx 是基于屏幕宽度缩放的单位，但它在某些场景下会被编译器“误判”：比如 position: fixed 元素使用 bottom: 40rpx，H5 端软键盘弹出后视口高度压缩，100vh 变小，40rpx 对应的像素值却没重算，导致定位上浮；App 端则可能因 WebView 内核差异，把 rpx 当作 px 直接处理。
- fixed 元素尽量不用
bottom，改用top: calc(100vh - 80px)（注意这里用px，不是rpx） - 需要动态适配时，在
onReady中调用uni.getSystemInfoSync().windowHeight算出真实高度，再通过:style="{ top: `${windowHeight - 120}px` }"绑定 - 避免在 fixed 元素或其任意祖先上写
transform、filter、opacity——它们会触发新层叠上下文，让 fixed “钉不住视口”
为什么 H5 正常、App 端字体/间距变大或错位
App 端（尤其是 iOS）默认启用系统字体缩放，且部分 Android WebView 对 rpx 计算精度偏低；更关键的是，uni-app 编译到 App 时会把 CSS 转为 Weex 原生样式，而 Weex 不支持 flex-wrap、gap、aspect-ratio 等现代属性，会被直接丢弃。
立即学习“前端免费学习笔记（深入）”；
- 字体大小统一用
upx（非rpx），它由 uni-app 运行时动态计算，比 rpx 更稳定；例如font-size: 28upx - 避免
gap，用margin替代；避免flex-wrap: wrap，改用多层flex容器或flex-direction: column拆分 - App 端禁用系统字体缩放：在
manifest.json → app-plus → nvueStyle中加"fontSizeFollowSystem": false
最易被忽略的一点：条件编译不是“补丁”，而是编译期决策。写 /* #ifdef MP-WEIXIN */.btn{padding:20rpx;}/* #endif */ 没问题，但如果你在同一个 class 里混写 H5 和小程序都支持的属性，又夹杂一个小程序不支持的属性（比如 backdrop-filter），uni-app 不会帮你降级或 polyfill，它只会照常输出，小程序端直接无视那整条声明——你以为只是滤镜没了，其实 padding 也可能跟着失效，因为整个规则块被跳过了。
