--vh 必须动态更新，因地址栏收起、键盘弹出、横竖屏切换均会改变 visualviewport.height，需监听 visualviewport.resize 事件并校验异常值，否则高度计算失效。
直接用 CSS 变量做移动端适配，不是加几个 --spacing-md 就能跑通的——它本质是手动接管浏览器原生行为，漏一个回退、错一次单位、少一层作用域，真机上就是白屏、撕裂、闪屏或样式全崩。
为什么 --vh 必须动态更新，且不能只设一次
移动端地址栏收起、软键盘弹出、横竖屏切换都会改 window.visualViewport.height，但 CSS 变量不会自动响应。只在 DOMContentLoaded 里设一次 --vh，后续所有高度计算都基于过期值。
- 必须监听
visualviewport.resize（不是window.resize），iOS 键盘弹起时后者不触发 - 初始值要兜底：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - 安卓部分定制系统（如华为 EMUI）返回异常值，需校验：
if (v.height > 0 && v.height -
--vh只适合容器级高度（如全屏页、模态框），别在嵌套滚动区或动画中用
env() 和 --safe-top 怎么写才不塌底
env(safe-area-inset-bottom) 单独用等于没写——不支持环境时整条声明被丢弃，padding-bottom 直接变 0。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">缺一不可；微信 X5 内核基本不支持，真机测不到非零值 - 必须用
calc(16px + env(safe-area-inset-bottom))或max(0px, env(safe-area-inset-bottom, 0px))包一层，否则 fallback 失效 - @supports 检测要写对：
@supports (padding-top: env(safe-area-inset-top))，写成@supports (env(...))浏览器直接忽略整块 - Vue/React 的内联样式里写
style={{ paddingTop: 'env(...)' }}完全无效，JS 不解析 CSS 函数
间距变量为什么在媒体查询里重定义也失效
CSS 变量没有响应式能力，:root { --spacing-md: 16px } 写完就固定了，小屏不会自动变小。
- 必须在媒体查询内重新赋值：
@media (max-width: 768px) { :root { --spacing-md: 12px; } } - Safari 15.4+ 才真正支持
:root在媒体查询中重定义；老 Safari 得靠 JS 切html.mobile类再配对应规则 - Shadow DOM 或 scoped style 里要用组件选择器声明：
.card-mobile { --spacing-md: 8px; } - 所有引用处必须带 fallback：
margin: var(--spacing-md, 16px)，否则未命中查询时值为undefined
主题切换时第三方组件不响应的硬伤在哪
Ant Design、NutUI 这类库靠 JS 注入 .dark 类或改 :root 变量，和你的媒体查询规则容易打架——要么你的样式被 reset，要么库的主题开关失效。
- 变量必须统一定义在
:root，不能写在.dark或body里，否则<input>、伪元素、Shadow DOM 内部读不到 - JS 必须在
内联执行：window.matchMedia('(prefers-color-scheme: dark)').matches立即检测并设data-theme，防 iOS Safari 首屏闪白 - 第三方组件选择器要具体化：
html[data-theme="dark"] .nut-button，禁用!important——它会切断变量链，用户手动切换主题就彻底失效 - 过渡只能作用于属性，
transition: --theme-color-primary 0.3s是无效的
最易被忽略的是：所有 fallback 都得是绝对单位（1px），不能是相对单位（1vh）；所有变量值必须带单位（12px），纯数字会被当成无效值丢弃；CSS 变量一旦设错，错误是静默的——布局偏移、颜色消失、间距归零，连控制台都不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
