响应式投影需用CSS变量+calc()绑定vw/vh单位，避免box-shadow内嵌calc()；通过:root媒体查询断点修正极小/极大屏值，并统一前缀；悬停态须同步缩放所有参数并过渡变量。
投影距离随视口宽度动态缩放
响应式投影不能只靠 box-shadow 写死数值，必须把偏移量（x、y）和模糊半径（blur）绑定到视口变化。CSS 变量 + calc() 是最轻量的解法，无需 JS 干预，也避免媒体查询爆炸。
核心思路：用 1vw 或 1vh 作为基础单位，再通过 calc() 换算成具体像素值。比如投影右偏移设为 calc(0.5vw)，当窗口宽 1200px 时即为 6px，宽 400px 时缩为 2px —— 自然跟随缩放。
- 别直接写
box-shadow: calc(0.3vw) calc(0.3vw) calc(1.2vw) rgba(0,0,0,0.15)：浏览器不支持在box-shadow值里嵌套calc()（部分旧版 Safari 会失效） - 必须先定义 CSS 变量，再在
box-shadow中引用：--shadow-x: calc(0.3vw); --shadow-y: calc(0.3vw); --shadow-blur: calc(1.2vw); box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) rgba(0,0,0,0.15); -
vw单位对横向投影更稳定；若需纵向强响应（如卡片悬停高度变化），可混用vh，但注意移动端vh在地址栏展开/收起时会跳变
用 :root 定义变量并设置断点修正
纯 vw 缩放在极小屏（比如 iPhone SE）下会让投影过弱，极大屏下又可能过重。需要在 :root 中用媒体查询覆盖变量值，而不是写多套 box-shadow。
例如：
立即学习“前端免费学习笔记（深入）”；
html {
--shadow-x: calc(0.3vw);
--shadow-y: calc(0.3vw);
--shadow-blur: calc(1.2vw);
}
@media (max-width: 480px) {
:root {
--shadow-x: 2px;
--shadow-y: 2px;
--shadow-blur: 8px;
}
}
@media (min-width: 1440px) {
:root {
--shadow-x: 6px;
--shadow-y: 6px;
--shadow-blur: 24px;
}
}
- 媒体查询里的赋值必须是具体值（
2px）或仍含calc()，但不能再用vw套嵌套（如calc(0.3vw + 1px)兼容性差） - 所有变量名统一加前缀（如
--proj-x）避免和其他组件冲突 - 不要在组件级选择器里重复定义这些变量，否则无法被父级媒体查询覆盖
悬停态投影增强需同步响应式缩放
常见错误是悬停时只放大 blur，而 x/y 保持不变，导致视觉失衡——小屏下悬停投影“飘”出容器，大屏下却像没动。
- 悬停样式中所有投影参数都应基于同一套变量，仅调整系数：
&:hover { --shadow-x: calc(0.5vw); --shadow-y: calc(0.5vw); --shadow-blur: calc(2vw); } - 如果想让悬停有缓动感，
transition必须包含所有变量：transition: box-shadow 0.2s ease, --shadow-x 0.2s ease, --shadow-y 0.2s ease, --shadow-blur 0.2s ease; - Chrome 和 Safari 支持直接过渡 CSS 变量，但 Firefox 旧版本（transition: box-shadow 配合变量变更触发重绘，实测无卡顿
真机调试时投影突然消失的排查点
开发时看着正常，真机一跑就没了投影，大概率是以下三个原因：
- 变量名拼错或大小写不一致：
--Shadow-X和--shadow-x在 CSS 中是不同变量，且变量名区分大小写 - 父元素设置了
overflow: hidden，而响应式投影随vw增大后超出父容器边界被裁切（尤其在position: relative的卡片上） - 某些安卓 WebView（如微信内置）不支持在
box-shadow中使用var(--x)，需降级 fallback：box-shadow: 0 0 0 rgba(0,0,0,0); box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) rgba(0,0,0,0.15);
投影不是装饰细节，它是用户感知层级和交互反馈的关键通道。变量缩放看似简单，但 vw 单位、媒体查询覆盖顺序、真机兼容性这三点，漏掉任一个都会让效果在某个设备上完全失效。
