css变量本身不自动适配，它只是传递媒体查询、env()、calc()和js结果的管道；关键在正确时机、作用域及fallback写法。
直接说结论：CSS变量本身不自动适配，它只是把媒体查询、env()、calc()和JS计算结果“接进CSS”的管道——关键不在定义变量，而在怎么让它在正确时机、正确作用域、带正确fallback地生效。
为什么@media必须作用于:root才能切换间距变量
很多人写完--spacing-md: 16px就以为小屏会自动变小，结果真机上还是16px。根本原因是CSS变量没有响应式能力，它只认声明时的级联位置。
-
@media (max-width: 768px) { :root { --spacing-md: 12px; } }才是有效写法；嵌套在.container里定义的变量，子元素不会继承（除非该容器显式设为继承源） - Safari 15.4+才真正支持
:root内媒体查询重定义；老Safari需退回到html.mobile { --spacing-md: 12px; }+ JS切class - Shadow DOM或scoped style组件中，变量声明得移到组件选择器内，比如
.card-mobile { --spacing-md: 8px; } - 别指望
var(--spacing-md)自动fallback，必须写成var(--spacing-md, 16px)
env(safe-area-inset-bottom)为什么总返回0px
90%的问题出在viewport-fit=cover没写对或被覆盖。iOS只在明确启用视口扩展时才注入安全区变量，漏掉这句meta，env()恒为0px。
- 必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">；写成contain或不写，env()就是摆设 - Chrome DevTools响应式模式完全不模拟该行为，必须用真机Safari或WKWebView验证
- 单独写
padding-bottom: env(safe-area-inset-bottom)是高危操作——老iOS、安卓WebView、桌面浏览器会丢弃整条声明，退回到上一个有效值（比如0） - 推荐写法：
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px))；calc()兜底，env()第二参数只是补充，不能依赖
calc()和var()组合时单位怎么处理才不踩坑
var()是少数能在calc()里直接参与运算的CSS值类型，但单位必须显式、类型必须一致，否则计算静默失效。
-
margin-inline: calc(var(--spacing-unit) * 2)合法；transform: rotate(var(--deg))非法，得写成transform: rotate(calc(var(--deg) * 1deg)) -
calc(var(--spacing-md) + 2px)合法；calc(var(--spacing-md) + 2)会失效——数字2无单位，无法与带单位的var()相加 - 避免
margin: var(--spacing-md) 0这种简写，CSS不支持部分替换；必须写全margin: var(--spacing-md) 0 var(--spacing-md) 0 - 全部间距变量统一用
px，别混rem或em——后者在嵌套缩放时行为不可控
JS动态修改--vh变量后布局为啥还错乱
CSS变量本身不解决vh适配问题，它只是传递window.innerHeight的管道。移动端地址栏收起/软键盘弹出/横竖屏切换都会改变视口高度，但变量不会自动更新。
- 必须监听
resize事件（iOS对orientationchange支持不稳定，resize更可靠）；某些iOS版本地址栏收起时不触发，需额外节流监听scroll - 首次渲染前就要执行设置逻辑，否则白屏阶段用的是
1vh兜底，可能闪动 -
--vh值不是像素数，而是px单位的1%基准，所以得乘以100：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`) - 比起变量方案，
100dvh是原生动态单位（iOS 16.4+、Chrome 100+已稳定），自动响应地址栏、键盘、安全区变化；变量方案本质是手动模拟，边界场景多（WebView事件缺失、老iOS机型降级）
最易被忽略的点：所有env()变量都必须配合calc()和fallback值写在前面，而不是靠@supports检测后才加载——因为@supports (padding-top: env(safe-area-inset-top))本身在旧版Safari里就不被识别，整块规则会被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
