骨架屏不能用纯CSS实现是因为其核心是结构模拟，必须用HTML元素占位以复现真实DOM的尺寸、布局和层级，否则会导致页面跳动；纯CSS动画无法提供准确的结构占位。
骨架屏为什么不能用纯 CSS 实现加载状态
纯 CSS 的 loading 动画（比如旋转、闪烁）无法反映真实 DOM 结构的占位，用户感知不到“哪块内容还没出来”，容易误点或困惑。骨架屏的核心是结构模拟——它得和最终渲染的容器尺寸、布局、层级一致，否则一上屏就跳动、错位。
所以必须用 HTML 元素占位，配合 CSS 控制视觉效果。常见错误是直接在 div 上加 background: linear-gradient(...) 就完事，结果文字区域没留高、图片宽高没设、flex 布局没复现，加载后整个区块“弹跳”。
- 必须复现目标区域的盒模型：
width/height、padding、margin、display（尤其是flex或grid） - 图片占位需固定宽高比，推荐用
aspect-ratio或伪元素 +padding-top技巧 - 文字行高、行数要匹配，用多个
span模拟段落，每个加display: block和height
如何用最简 HTML + CSS 写出可复用的骨架组件
不要写一堆独立 class，把骨架逻辑封装成语义化结构。例如一个文章卡片骨架，用 <article class="skeleton-card"> 包裹，内部结构固定：
<article class="skeleton-card"> <div class="skeleton-img"></div> <div class="skeleton-title"></div> <div class="skeleton-paragraph"></div> <div class="skeleton-paragraph short"></div> </article>
对应 CSS 只需控制三类样式：容器、媒体占位、文字占位。关键点：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
.skeleton-img必须设aspect-ratio: 16/9或padding-top: 56.25%防止重排 -
.skeleton-title用height: 1.5em+line-height: 1.5模拟单行标题 -
.skeleton-paragraph用height: 1em* 行数，margin-bottom对齐真实段落间距 - 所有占位元素统一加
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)和background-size: 200% 200%实现流动效果
Vue/React 中怎么切换骨架屏和真实内容
核心原则：骨架屏和真实内容必须共用同一容器，且不触发 layout shift。常见错误是用 v-if 或 {loading ? <Skeleton> : <Content>} 导致 DOM 替换，骨架消失瞬间页面塌陷。
正确做法是用条件渲染但保持容器稳定：
- Vue：用
v-show控制<Skeleton>显隐，真实内容始终在 DOM 中（哪怕空），靠v-if控制其数据绑定 - React：用
opacity+pointer-events: none过渡，避免display: none；或者用aria-hidden配合visibility: hidden保留占位 - 务必给容器设
min-height或height，防止骨架未加载时高度为 0
示例 React 片段：
<div className="card-container" style={{ minHeight: '200px' }}>
<SkeletonCard visible={loading} />
<ContentCard data={data} aria-hidden={loading} />
</div>移动端适配骨架屏容易被忽略的细节
PC 端写的骨架屏，到手机上常出现文字过小、图片变形、行间距错乱。根本原因不是响应式没写，而是骨架元素没继承父级字体缩放或视口单位行为。
- 避免用
px固定文字高度，改用em或rem，让.skeleton-paragraph的height跟随根字号变化 - 图片占位的
aspect-ratio在 iOS Safari 15.4+ 才支持，旧版本必须回退到padding-top百分比方案 - 禁用骨架屏上的
user-select: none，否则 iOS 双击放大失效；改用pointer-events: none控制交互 - 加载完成时，移除骨架前确保真实内容已 layout 完成，否则可能闪白——可在
useEffect或mounted里加requestAnimationFrame延迟隐藏
骨架屏不是“做个 loading 图”，它是 DOM 结构的预演。漏掉一个 margin、少设一个 min-height，上线后就会在某个机型上跳一下——而这种抖动，用户不会说“体验不好”，只会默默关掉页面。
