移动端骨架屏必须适配流式布局：尺寸需用 aspect-ratio 或 padding-top 配合绝对定位，文字行高按 line-height×行数计算，HTML 复用真实组件 class，首屏骨架须在 HTML 解析阶段即存在。
移动端骨架屏不是把桌面端代码加个 @media 就能用的——它必须在窄视口下不溢出、不重叠、不塌陷，且首屏渲染时就存在，不能等 JS 执行完才出现。
为什么移动端骨架屏一加载就错位或塌成一条线
90% 的问题出在尺寸控制逻辑没适配移动设备的流式布局特性。桌面端靠固定 width + height 可能凑合，但移动端视口宽度变化频繁，height: 100px 在小屏上会撑爆容器，margin-bottom 会被折叠，line-height 若未显式继承则退化为浏览器默认值（通常 1.1–1.2），导致文字行高失配。
- 所有骨架元素必须设
box-sizing: border-box，且与真实内容完全一致 - 禁用
min-height做占位：它在父容器无高度时无效，移动端常见于 flex 容器未设align-items或 grid 未设minmax() - 图片占位优先用
aspect-ratio: 4 / 3（现代浏览器），fallback 方案用padding-top: 75%+position: relative+ 子元素position: absolute - 文字行占位只靠
line-height × 行数计算高度，例如真实段落是line-height: 1.5; font-size: 14px，骨架就设height: calc(1.5 * 14px * 3)（三行）
如何让骨架结构严格匹配真实组件的响应式断点
骨架不是“看起来像”，而是要参与同一套 CSS 规则计算。移动端常有 .card-grid-2（双列）、.card-stack（单列堆叠）等 class 控制布局，如果骨架节点没带这些 class，媒体查询一触发，它就卡在错误位置上。
- 骨架 HTML 必须复用真实组件的 class 名，例如真实卡片外层是
<div class="card card-grid-2">，骨架就写 <code><div class="card card-grid-2 skeleton-card"> <li>避免用 JS 动态拼接 class，如 <code>class="card ${loading ? 'skeleton' : ''}"—— SSR 下服务端和客户端 class 不一致，hydration 会失败 - 列表类骨架需按接口预期长度生成（如 6 项），但容器级骨架（页眉、底部导航）应直接复用组件模板的断点 class，而非硬编码
@media分支 - 所有骨架块加
overflow: hidden，防止 iOS Safari 上渐变动画从圆角边缘漏出 - Vue 中初始
loading: true必须在setup()顶层声明，不能延迟到onMounted里才赋值 - React 中用
useState(true)初始化，请求发起后立即setLoading(true)，而不是等接口返回才设 - SSR 场景下，服务端已吐出真实 HTML，客户端 hydration 时若仍显示骨架，会闪一下——需加判断：
document.readyState === 'complete'时跳过初始骨架 - 使用
keep-alive的 Vue 页面，缓存后data仍存在，但用户刷新页面时应重新触发骨架——需监听activated钩子并重置加载态
移动端首屏骨架必须在 HTML 解析阶段就存在
等 useEffect 或 mounted 再显示骨架，用户已经看到白屏了。移动端网络更不可靠，JS 下载/执行延迟更明显，骨架必须比 JS 更早出现。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的是字体度量对齐：移动端系统字体（San Francisco、HarmonyOS Sans）在加载前不可靠，但 line-height 是继承值，可提前推导；若骨架文本用空格或固定 height 占位，换行位置必然偏移，导致后续真实内容插入时发生 layout shift。
