硬编码 background-color 在深色模式下失效，需用 CSS 变量配合 prefers-color-scheme 媒体查询；容器必须有明确尺寸（width/display）才能支撑 aspect-ratio 和背景渲染；transition 跳变源于 JS 执行时机不当，应包裹 requestAnimationFrame。
直接写 background-color: #f0f0f0 在深色模式下会翻车——它不会自动变暗，也不响应系统主题切换，更没法复用到不同组件里。
为什么 background-color 硬编码值在移动端会失效
不是颜色没渲染出来，而是它根本不具备响应能力。iOS Safari 和 Android WebView 都支持 prefers-color-scheme 媒体查询，但硬写的色值不会被浏览器重算。用户切深色模式、换主题、甚至嵌入 Web Component 时，占位色仍卡在浅灰，视觉割裂感立刻出现。
必须用 --placeholder-bg 变量 + @media (prefers-color-scheme: dark)
变量得声明在可继承的作用域，并留出被覆盖的路径：
-
:root { --placeholder-bg: #f0f0f0; }设默认值 -
@media (prefers-color-scheme: dark) { :root { --placeholder-bg: #333; } }让浏览器原生接管切换，不依赖 JS 监听 - 容器上写
background-color: var(--placeholder-bg)，千万别加!important——它会阻断变量解析 - 若用在 Shadow DOM 或 Web Component 中，改用
:host { --placeholder-bg: #f5f5f5; }更稳妥
aspect-ratio 容器没尺寸，变量再智能也白搭
变量只管颜色，不管空间。如果父容器没设 width 或 display: block，aspect-ratio 就推不出高度，整个容器塌陷，background-color 根本没地方画。
立即学习“前端免费学习笔记（深入）”；
- 确保容器有明确宽度：
width: 100%或max-width: 100% - 设
display: block（默认inline会塌） - 移动端优先用
aspect-ratio: 4 / 3这类安全比，别为不同断点写多套值——切换时 JS 正在加载图片，可能卡在中间比例导致错位 - 后端图比例不固定？纯 CSS 搞不定，得用 JS 动态注入
style="--aspect-ratio: X/Y"
过渡“啪”一下跳变，不是动画写错了，是时机没对
JS 直接 el.classList.add('loaded') 后，浏览器来不及触发重绘链，背景就瞬间消失。这不是 CSS 问题，是执行顺序问题。
- 正确做法：包一层
requestAnimationFrame(() => el.classList.add('loaded')) - 如果用了
background-image（比如渐变占位），transition对它完全无效——只能切opacity或visibility - 检查是否误用了
!important，它会让var(--placeholder-bg)解析失败，退回到初始色
最常被忽略的，从来不是变量怎么写，而是「容器有没有稳定尺寸」——var(--placeholder-bg) 再智能，也填不满一个高度塌陷的 div。
