text-shadow响应式需用媒体查询手动分层设置：小屏用0 1px 2px，中屏加浅色外扩，大屏用立体多层；禁用em单位，避免safari渲染bug，透明度须适配背景明暗。
text-shadow 在不同屏幕尺寸下怎么动态调整
响应式文字阴影不是靠单个 text-shadow 属性自动适配，而是靠媒体查询（@media）在不同断点手动重写值。浏览器不会缩放阴影的像素值，1px 始终是 1px，哪怕设备像素比是 2 —— 所以你得自己控制它在小屏上变细、在大屏上加厚或扩散。
- 小屏（如手机）建议用
text-shadow: 0 1px 2px rgba(0,0,0,0.2)：偏移和模糊都收敛，避免遮挡字形 - 中屏（平板）可加一层浅色外扩：
text-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 0 8px rgba(0,0,0,0.08) - 大屏（桌面）才适合用较重的立体效果，比如
text-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1)
为什么直接写 text-shadow: 0 0.1em 0.2em black 不行
用相对单位（em、rem）看似能响应，但实际效果不可控：文字大小变化时，阴影的偏移和模糊会跟着放大，导致小字号下阴影糊成一团，大字号下又过于稀薄。更麻烦的是，text-shadow 的模糊半径不支持百分比，em 在这里容易被误读为“相对于字体大小”，而真实渲染逻辑更接近“绝对像素换算”，尤其在缩放或高 DPR 屏幕下偏差明显。
- Chrome 和 Safari 对
em值的解析略有差异，同一段 CSS 在 iOS 和 macOS 上表现可能不一致 - 如果父元素设置了
font-size: 0.875rem，子元素用text-shadow: 0 0.1em 0.2em，实际计算出的像素值可能远小于预期 - 真正可靠的还是固定像素值 + 媒体查询分层覆盖
媒体查询断点该选哪些值才合理
别照搬 Bootstrap 的 768px 或 992px。文字阴影是否显眼，取决于视口宽度 * 和 字体实际渲染尺寸 *，而不是设备类型。推荐按文字容器宽度设断点，比如针对标题：@media (max-width: 480px) 处理移动端，@media (min-width: 481px) and (max-width: 768px) 处理横屏手机/小平板，@media (min-width: 769px) 启用完整阴影。关键是要在真机或 DevTools 设备模拟下反复调，看阴影有没有吃掉字形边缘、有没有在深色背景上发虚。
- 避免用
max-device-width：现代浏览器已基本不支持，且无法响应窗口缩放 - 不要只测一个断点，相邻断点间留 1–2px 缓冲，比如
480px和482px，防止边界抖动 - 如果项目用了 CSS 自定义属性，可以用
--shadow-sm/--shadow-lg配合 JS 动态切换，但纯 CSS 方案更稳
遇到 text-shadow 在 Safari 上消失或错位怎么办
Safari（尤其是 iOS 15–16）对多层 text-shadow 的复合渲染有 bug：当某一层的偏移值为 0 且模糊值极小（如 0.5px），整条声明可能被忽略；另外，开启 transform: scale() 的父容器会让阴影位置偏移，这是 WebKit 已知行为。
- 绕过方式：把所有
0偏移写成0.1px，例如text-shadow: 0.1px 0.1px 0.5px rgba(0,0,0,0.1) - 禁用硬件加速可缓解错位：
transform: translateZ(0)换成will-change: auto，或干脆不用 transform 包裹文字容器 - 测试时务必开「Disable cache」并硬刷新，Safari 有时会缓存错误的阴影渲染结果
文字阴影的响应式本质是“分场景设计”，不是“自动适配”。最易被忽略的一点：阴影颜色的透明度要随背景明暗动态调整，否则深色模式下写死的 rgba(0,0,0,0.3) 会直接盖住文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
