overflow: hidden 必须写在 html 上而非 body，因为浏览器滚动由根元素控制，仅作用于 body 会导致隐藏失效、滚动条意外出现或缩放抖动；实操需 html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }。
为什么 overflow: hidden 必须写在 html 上而不是 body
因为浏览器滚动行为由根元素（html）控制，body 只是普通块级元素。只给 body { overflow: hidden }，滚动仍会作用于 html，导致隐藏失效、意外出现滚动条或缩放抖动。
实操建议：
-
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }缺一不可 - 务必把
overflow: hidden写在html选择器里，哪怕只写一次也得带上 - 若用 Vue/React，确保挂载点（如
#app）也设height: 100%，否则子元素100vh会失效
grid-template-areas 比浮动和绝对定位更适合大屏分区
大屏模块位置固定、区域语义明确（如 "header"、"map"、"kpi-left"），用 grid-template-areas 能一眼看清布局结构，改分辨率时只需调比例，不需重排逻辑。
常见错误：
立即学习“前端免费学习笔记（深入）”；
- 用
position: absolute+ 百分比 top/left —— iOS Safari 下视口跳变会导致坐标偏移 - 用
float或inline-block—— 行高、换行、间隙难控，缩放后错位概率极高 - 没设
grid-template-rows: 1fr 2fr 1fr等相对单位，而是写死100px 600px 80px—— 换屏即崩
推荐写法：
display: grid;<br>grid-template-areas:<br> "header header header"<br> "map kpi chart"<br> "stat stat stat";<br>grid-template-rows: 1fr 4fr 1fr;<br>grid-template-columns: 2fr 3fr 3fr;
用 transform: scale() 替代 rem 实现等比拉伸
rem 依赖 font-size 动态计算，在 1920×1080 到 3840×2160 跨度下，小数精度误差会逐层放大——字体、边框、间距全部错位。而 scale() 是纯几何变换，无计算累积误差。
关键细节：
- 缩放基准必须是设计稿宽高比（如 16:9），不是屏幕物理分辨率
- 缩放容器要加
transform-origin: 0 0，避免内容偏移 -
canvas需同步处理：先设canvas.width = canvas.offsetWidth * window.devicePixelRatio，再设canvas.style.width = "100%" - 监听
resize时只更新transform，不要重新渲染 DOM 或重绘图表
ECharts 容器尺寸不稳定导致 Cannot initialize ECharts instance before container is ready
这个报错本质是容器 DOM 已挂载但尺寸为 0，常见于组件异步加载、CSS 尚未生效、或父容器未设高。
规避方法：
- 初始化前加判断：
if (container.offsetWidth && container.offsetHeight) { echarts.init(container); } - 不用
mounted或DOMContentLoaded直接 init，改用requestAnimationFrame延迟一帧 - 所有图表容器 CSS 必须显式设
width和height（不能靠100%继承） - resize 后必须手动调用
chart.resize()，ECharts 不自动监听容器变化
最易被忽略的一点：拼接大屏（如 2×2 LED 墙）下，window.innerWidth 返回的是逻辑宽度，不是物理像素总和，scale 计算要用设备实际分辨率比值，而非浏览器视口尺寸。
