移动端骨架屏适配需用固定像素设background-size并由容器响应式缩放，禁用rem/vw单位因WebKit内核不支持；结构用渐变绘制，两层渐变耦合控制轮廓与扫光，动画须用background-position驱动且内联样式。
移动端骨架屏适配不是靠媒体查询堆断点，而是让渐变背景本身“跟着容器缩放”，同时避开 WebKit 内核对单位的硬性限制。关键在 background-size 用固定像素 + 容器响应式控制，而非试图用 rem 或 vw 直接驱动背景尺寸。
为什么 background-size 不能用 rem/vw
iOS Safari（所有 WebKit 内核）完全不支持 rem、vw、vh 作为 background-size 的单位。写 background-size: 20rem 100% 在 iPhone 上会被直接忽略，退化为浏览器默认值（通常是 auto），导致扫光动画拉伸、卡顿甚至消失。
- 错误写法：
background-size: 20rem 100%→ iOS 上无效 - 安全写法：
background-size: 200px 100%（宽度明显大于典型容器，确保位移空间） - 若需动态适配视口，用 JS 注入：
el.style.backgroundSize = `${window.innerWidth * 1.5}px 100%` - 容器自身负责缩放：靠
width: 100%、max-width: 100%和<meta name="viewport" content="width=device-width, initial-scale=1">
如何让骨架结构随屏幕缩放不失真
头像圆角、标题长条、段落行高这些“形状”不是靠 div 堆出来的，而是用渐变“画”出来的，所以缩放逻辑必须落在容器上，而不是渐变参数里。
- 头像占位用
radial-gradient(circle, #f0f0f0 0%, #f0f0f0 50%, transparent 50%)+background-size: 40px 40px，再配合width: 40px、height: 40px、border-radius: 50% - 段落行用
background-repeat: repeat-y+background-size: 100% 12px，高度由容器line-height或padding控制 - 图片类占位优先用
aspect-ratio: 4/3+width: 100%，别写死height，否则小屏缩放会畸变 - 所有骨架容器必须加
overflow: hidden，否则圆角区域扫光滑出会漏白边
两层 linear-gradient 的耦合要点
单层渐变只能铺色，没法同时表达「结构轮廓」和「扫光动效」。必须用 background-image 显式声明两层，且它们共享同一组 background-size 和 background-position，否则动画错位、光条漂移。
立即学习“前端免费学习笔记（深入）”；
- 底层结构示例：
linear-gradient(to right, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%) - 上层扫光示例：
linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%) - 必须配
background-repeat: no-repeat，否则重复导致光条闪烁跳变 - 动画关键帧里的
background-position必须与background-size宽度匹配，比如background-size: 300px 100%，就得写from { background-position: -300px 0; } to { background-position: 300px 0; }
动画性能与兼容性底线
真正影响首屏体验的不是“有没有动画”，而是动画是否稳定触发 GPU 加速、是否在低端安卓机或旧版 WebView 中不掉帧。
- 必须用
background-position驱动动画，transform: translateX()在 UC、QQ 浏览器等旧 WebView 中直接失效，且边缘发虚、锯齿明显 - 缓动必须用
linear，ease会让光效在起止点滞留，破坏阅读流感 - 每个骨架块（如
.skeleton-card）应单独绑定动画，别在:root或全局 class 上启用，避免复用实例导致节奏混乱 - 动画开始前容器必须有明确宽高，且不能是
display: contents或visibility: hidden，否则动画不触发
最易被忽略的是：骨架屏样式必须内联进 HTML 的 <style></style> 标签里，外链 CSS 会导致 SSR/首屏直出时闪白——用户看到的不是加载中，而是空白。
