HTML样式无统一跨平台写法，兼容性取决于CSS特性支持、单位解析、渲染引擎差异及语义化程度；微信X5内核不支持gap/aspect-ratio/inset，iOS14.5前无scroll-behavior:smooth，Android WebView对grid auto-fit+minmax()易回退单列。
HTML 样式代码本身没有跨平台“统一写法”，真正影响兼容性的，是 CSS 特性支持、单位解析、渲染引擎差异和 HTML 结构语义化程度。直接写 style 属性或内联 块，在多数场景下能跑，但一到微信小程序、React Native WebView、Electron 或旧版 Safari 上就容易出错。
哪些 CSS 属性在移动端 WebView 里最常失效
不是所有标准 CSS 都被完整实现。比如微信内置浏览器（X5 内核）对 gap、aspect-ratio、inset 支持极差；iOS 14.5 之前不认 scroll-behavior: smooth；部分 Android 系统 WebView 对 grid 的 auto-fit + minmax() 组合会回退成单列。
- 优先用
flex替代grid布局，尤其涉及动态列数时 -
background-clip: text必须配-webkit-background-clip: text，且只在支持text值的内核生效（iOS ≥ 14.5，Android Chrome ≥ 90） - 避免单独依赖
prefers-reduced-motion媒体查询做关键动效开关——老版微信、QQ 浏览器根本不识别该特性 -
vh在 iOS Safari 中有滚动时视口高度跳变问题，建议用100dvh（但注意：Android Chrome ≤ 102 不支持dvh）
style 属性和外部 CSS 文件的加载顺序陷阱
内联 style 属性权重高于外部样式表里的选择器，但低于 !important。更麻烦的是加载时机：外部 CSS 如果没加 media="print" 或 disabled 控制，可能在 DOM 解析完成前就触发重排，导致闪屏或布局错乱。
- 动态插入的
默认异步，但若在里插入，可能造成 FOUC（Flash of Unstyled Content） - 服务端渲染（SSR）场景下，务必确保初始 HTML 已含关键样式，不能全靠 JS 注入
style标签 - 使用
style属性设置颜色时，别写style="color: var(--primary)"—— 这种 CSS 变量在内联样式里不会计算，必须提前 resolve 成具体值（如#3b82f6）
不同平台对单位和颜色的支持差异
rem 依赖根字体大小，但微信小程序自定义组件中 page 和 view 的根元素可能不继承 html 的 font-size；hsl() 在 Android 4.4 WebView 中部分解析失败；transparent 虽然通用，但某些老旧系统会当黑处理。
立即学习“前端免费学习笔记（深入）”；
- 字体单位优先用
px或em，慎用rem，除非你完全控制根节点font-size且已 polyfill - 颜色尽量不用
hwb()、lab()等新函数，基础场景用十六进制或rgb()/rgba() -
calc()表达式里不要混用单位类型，例如calc(100% - 2rem)在部分安卓 WebView 中会整体失效，换成calc(100% - 32px)更稳 - 避免在
style属性里写多值属性，如style="border: 1px solid #000; border-radius: 4px;"拆成两个独立style属性会覆盖前一个
真正难的不是写样式，而是判断「这个 CSS 规则在目标环境里，是由谁解析、何时解析、按什么规则降级」。很多时候问题不出在代码本身，而出在你默认它运行在 Chrome 最新版上。
