小程序中scoped样式失效并非代码错误，而是uni-app编译时无法将data-v-xxx属性注入wxml，只能靠class哈希模拟隔离；一旦父子组件哈希不一致或postcss插件链中断（如漏配postcss-plugin-uni-app），样式即失效泄漏。
为什么小程序里
根本不是你写错了，是 uni-app 编译时没把 scoped 样式正确注入到小程序 WXML 的 class 名里。微信/支付宝小程序底层不支持 data-v-xxx 属性选择器，uni-app 只能靠 class 名哈希模拟隔离——但一旦父子组件哈希不一致、或 postcss 插件链断了，就直接失效，样式全局泄漏，布局瞬间崩坏。
- 检查
vue.config.js是否误删了css.loaderOptions.postcss.plugins，尤其老项目升级后容易丢掉postcss-plugin-uni-app -
::v-deep .class必须写成::v-deep(.class)（括号不能省），否则整条规则被编译器静默丢弃 - 避免在组件
.json里手动加"styleIsolation": "isolated"，它会和 uni-app 自己的 scoped 逻辑冲突，反而放大污染 - 动态绑定的 class（如
:class="['item', isActive ? 'active' : '']"）不会被哈希处理，得手动加前缀或改用内联style
fixed 按钮错位、悬浮块跟着滚动跑
这不是 JS 逻辑问题，是抖音小程序对 position: fixed 的渲染内核做了特殊处理：它默认让 fixed 元素跟随页面滚动，而不是真正“固定”。微信和支付宝则按标准实现，所以同一套代码三端表现天差地别。
- 抖音端必须加强制重置：
#ifdef MP-TOUTIAO .fixed-btn { position: -webkit-sticky; position: sticky; top: auto; bottom: 120rpx; } - 所有 fixed 元素务必显式声明
z-index，抖音默认层级极低，z-index: 999是底线 - 不要把
fixed元素塞进<scroll-view></scroll-view>内部——安卓下会触发滚动区域计算错误，iOS 下直接错位 - 用 flex 布局替代 float + fixed 组合，把按钮提到
<scroll-view></scroll-view>外层容器，结构更可控
输入框弹出键盘后页面乱飞
本质是视口重算冲突：键盘弹起时，iOS 和安卓对 window.innerHeight 和可视区域的处理不同，而 uni-app 默认依赖这些值做布局，结果就是安卓光标飘移、iOS 输入框被盖住。
-
<input>必须带adjust-position="true"和cursor-spacing="120"，否则无法触发平台原生调整逻辑 - 禁用
scroll-view内部的float布局，它和 input 的位置校准机制互斥 - 页面根容器用
display: flex; flex-direction: column; height: 100vh，把可滚动区和固定区彻底分离 - iOS 真机调试时，关闭 Safari 的“缩放文本”选项，否则字体大小浮动会加剧错位
upx 单位在某些端显示异常大或小
upx 不是万能单位，它的换算依赖设计稿基准宽度（默认 750）。如果项目用了非标准设计稿（比如 375 或 1125），或者某端未启用 upx 转换插件，就会出现尺寸翻倍或缩水。
- 确认
vue.config.js中css.loaderOptions.postcss.plugins包含postcss-pxtorem，且rootValue设为 37.5（对应 750 设计稿） - 不要混用
rpx和upx，rpx 是微信原生单位，upx 是 uni-app 封装的跨端单位，两者换算逻辑不同 - 字体大小优先用
upx，但 border、阴影等非尺寸类属性仍建议用px或rpx，upx 对它们的转换不可靠 - 支付宝小程序对 upx 支持较弱，关键间距建议用条件编译：
/* #ifdef MP-ALIPAY */ padding: 20rpx; /* #endif */
实际修复时，最常被忽略的是编译链路完整性——scoped 失效、upx 不转、fixed 错位，往往都源于某个插件没加载或配置项被覆盖。先跑一遍 npm run build:mp-weixin 查看生成的 wxss 文件里有没有哈希 class 和 upx 转换痕迹，比盲调样式快得多。
