应优先使用100dvh实现动态视口适配，但必须通过@supports (min-height: 100dvh)检测并回退至100vh；svh/lvh语义不同，不可混用或降级；微信等不支持环境需js监听resize动态设置--vh变量兜底。
@supports检测dvh/svh/lvh必须写对单位语法
直接写@supports (height: 100dvh)会失效——dvh只允许出现在min-height、max-height、height（仅部分浏览器）等有限属性中，但@supports检测的是「声明对」，不是单位本身。浏览器只认min-height: 100dvh这种完整组合。
常见错误包括：
-
@supports (dvh: 1px)：非法语法，CSS 解析器直接跳过整块 -
@supports (height: 100dvh)：Chrome 117+ 支持，但 Safari 15.6 仍拒绝解析，条件恒为 false -
@supports (min-height: 100dvh)✅：唯一推荐写法，覆盖 iOS 16.4+、Android Chrome 108+、桌面 Safari 16.4+
注意：svh和lvh不是dvh的“降级”，它们分别对应「小视口」和「大视口」，语义不可互换。比如地址栏收起时svh变小，dvh才真正反映可用高度。
自定义属性（CSS 变量）检测不能用var()函数
写@supports (color: var(--c))完全无效——var()是运行时值计算函数，不是声明语法的一部分。@supports只判断浏览器能否解析--xxx: yyy这类自定义属性声明本身。
正确检测方式只有这一种：
-
@supports (--primary: red)✅：值必须存在且合法（不能是空字符串或unset） -
@supports (--primary)❌：缺值，所有浏览器都返回 false -
@supports (color: --primary)❌：属性名写错，语法不合法
iOS 12.0+ 才支持该检测；iOS 11.4 及更早版本会直接忽略整个@supports块——所以降级样式必须无条件写在外部，不能依赖它兜底。
@supports嵌套逻辑要防 Safari 解析崩溃
Safari 14 无法解析@supports selector(:has(*))，整块 CSS 被丢弃；Safari 15.4 虽能解析，但@supports (inset: 0)仍返回 false。这意味着嵌套使用时，外层条件可能被支持，内层却因语法不识别而静默失败。
安全做法是：
- 避免多层嵌套
@supports，尤其不要把selector()、aspect-ratio、subgrid等高危特性放在内层 - 用
and代替嵌套：@supports (display: grid) and (grid-template-columns: subgrid)比@supports (display: grid) { @supports (grid-template-columns: subgrid) { ... } }更可靠 -
not慎用：@supports not (backdrop-filter: blur(1px))在 Android WebView 中可能误判，因滤镜实际生效但边界计算异常
所有逻辑运算符前后必须有空格：@supports (display: grid)and(gap: 1rem)❌（缺空格）会被 Safari 当作无效规则丢弃。
IE11 和老 Android WebKit 的兜底不是可选项，是必做项
IE11 完全不支持@supports语法，整条规则被忽略——如果你只把float布局写在@supports外面，而把grid包在里面，IE11 就只能看到float；但如果你把float也写在@supports里，IE11 就什么也看不到。
真正可行的结构只有这个顺序：
- 第一层：无条件兼容样式（
display: block+margin+float），用 IE11 能理解的语法 - 第二层：
@supports (display: grid)包裹现代布局，且内部不引用任何老浏览器不认识的属性（如gap） - 第三层（可选）：
@supports (gap: 1rem)单独增强，避免影响主布局稳定性
微信内置浏览器（X5 内核）对dvh支持极差，纯 CSS 无法覆盖，必须配合 JS 运行时读取window.visualViewport?.height或监听resize事件动态设置style.minHeight。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
