text-shadow 不会自动响应式缩放，需用 @media 手动分层覆盖：小屏收窄偏移模糊，大屏加厚外扩叠层；须设三档断点、留缓冲、配 prefers-reduced-motion 降级，并慎用动画。
用 @media 覆盖 text-shadow，别指望它自己缩放
浏览器不会按视口或字体大小自动缩放 text-shadow 的像素值——1px 就是 1px，哪怕在 iPhone 的 3x DPR 屏幕上也还是 1px 物理像素。所以“响应式阴影”本质是手动分层覆盖：小屏收窄偏移和模糊，大屏加厚、外扩、叠层。直接写 text-shadow: 0 0.1em 0.2em black 看似响应，实则不可控：字体变小时阴影糊成一团，变大时又稀薄发虚，Safari 还可能因 em 解析差异导致渲染错位。
断点选 max-width，不是设备类型
别硬套 Bootstrap 的 768px。文字阴影是否显眼，取决于容器宽度和当前字号，而非“是不是 iPad”。推荐三档实测断点：
-
@media (max-width: 480px)：手机竖屏，标题字通常 ≤ 24px，用text-shadow: 0 1px 2px rgba(0,0,0,0.2) -
@media (min-width: 481px) and (max-width: 768px)：横屏手机/小平板，可加浅色外扩层：text-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 0 8px rgba(0,0,0,0.08) -
@media (min-width: 769px)：桌面端，才启用立体多层：text-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1)
相邻断点间留 1–2px 缓冲（比如 480px 和 482px），避免窗口缩放时边界抖动。
动效必须配 @media (prefers-reduced-motion)
含 text-shadow 变化的 transition 或 @keyframes，若不拦截系统“减少运动”偏好，iOS/macOS 用户一开开关，动画就卡死或跳变——这不是 bug，是浏览器主动禁用。必须显式降级：
h1 {
transition: text-shadow 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
h1 {
transition: none;
text-shadow: none;
}
}
别用 JS 检测：CSS 媒体查询在样式计算阶段就生效，更早、更稳。
慎用 text-shadow 动画，尤其低端 Android
text-shadow 不是 GPU 加速属性，连续变化会强制重绘整段文本，低端 Android 设备极易掉帧。替代方案更可靠：
- 悬停增强阴影？优先用
transform: scale()配合静态阴影，视觉等效但性能好得多 - 需要动态模糊？改用
backdrop-filter: blur()包裹文字容器（注意 Safari 兼容性） - 图标类文字？直接用 SVG +
filter: drop-shadow()，支持百分比且可硬件加速
真正难的不是写几行 @media，而是每次改完都要在真机上拖动窗口反复看：阴影有没有吃掉字形边缘？深色背景上有没有发虚？这些细节没法靠理论推导，只能靠眼睛调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
