必须同时设置body{margin:0;min-height:100vh;background-color:#101a2c}和html{height:100%}，否则背景仅覆盖内容区域；canvas需设为block并宽高100vw/vh，避免background简写清空颜色；深色模式应通过data-theme+js控制而非仅依赖prefers-color-scheme。
直接用 body { background-color: #101a2c; } 不行，必须配合高度控制和防覆盖策略，否则滚动露白、缩放失真、深色模式下反色——这是大屏上线前最常被忽略的三处断点。
body 背景色为什么只显示一截？
空页面或内容少时，body 高度由内容撑开，不是视口；html 元素默认也不占满 100vh。结果就是背景只盖住文字区域，上下左右全是浏览器默认白边。
- 必须同时写：
body { margin: 0; min-height: 100vh; background-color: #101a2c; } - 加一句
html { height: 100%; }更稳妥，尤其在 Safari 或某些 WebView 中 - 别信
height: 100vh——内容超长时会被截断，min-height才是安全选择
canvas 粒子背景和 body 背景色怎么共存？
粒子背景（如 <canvas id="particlesCanvas"></canvas>）是层叠在 body 之上的，它本身透明，靠 background-color 做兜底。但如果你给 canvas 加了 background-image 或用了 background 简写，会清掉颜色。
- canvas 的 CSS 只设尺寸和 display：
#particlesCanvas { display: block; width: 100vw; height: 100vh; } - 粒子 JS 初始化时，先清空 canvas 内容再绘图，避免旧帧残留干扰深色背景
- 如果 canvas 上要叠加文字/图表，确保它们的
color和background-color显式声明，别依赖继承
深色模式下背景变灰或文字消失怎么办？
@media (prefers-color-scheme: dark) 在部分安卓 WebView、老版 Edge 和 Safari 中支持不全，且系统切换主题时页面不会自动重绘。硬切容易翻车。
- 改用
+ JS 控制，比如监听storage事件同步主题 - 深色背景配浅色文字时，别只调
color，加text-shadow: 0 0 8px rgba(0,120,255,0.4)提升可读性 - 避免用
background: #000——纯黑在 OLED 屏上耗电高、对比刺眼，#101a2c或#0f172a更稳
真正卡住上线的，往往不是粒子动效或 ECharts 配置，而是 canvas 尺寸没随窗口 resize 重设、body 的 margin 漏清、或者深色模式下某张半透明 PNG 把整个背景透成灰白——这些细节不跑真机、不压分辨率根本看不出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
