用 grid 布局搭骨架，别碰 float 或 position: absolute；根容器设 100vh/100vw，用 grid-template-rows/columns 划分区域，grid-area + grid-template-areas 可视化布局，间隙用 clamp，字体和尺寸用 rem，图表容器设 vw/vh 并监听 resize，ECharts 初始化需确保容器尺寸稳定，数据动态加载并节流。
用 grid 布局搭骨架，别碰 float 或 position: absolute
新手最容易卡在“一换屏幕就错位”，根本原因是用了浮动或绝对定位硬排。这些方式在 1920×1080 下看着整齐，到了 3840×2160 拼接屏或投影仪上，模块直接飞出可视区。
真正稳的方案是 display: grid，它天然支持等比缩放和区域命名，且现代浏览器（Chrome/Firefox/Safari 16.4+）兼容性已无风险。
-
height: 100vh; width: 100vw;作为根容器，确保占满全屏 - 用
grid-template-rows: 1fr 6fr 1fr和grid-template-columns: 2fr 6fr 2fr划分三栏+三行，比例数字可调，不写像素 - 每个模块加
grid-area（如"header"、"main"），再用grid-template-areas可视化排布，改布局只动一行字符串 - 避免
grid-gap用固定像素，改用clamp(10px, 1.5vw, 24px)实现间隙自适应
font-size 和图表容器必须用相对单位，否则缩放后文字糊成一片
常见错误：CSS 里写 font-size: 16px、width: 600px，结果大屏一放大，字小得看不见，图表被拉扁。
解决思路不是“让页面跟着屏幕拉伸”，而是“让所有尺寸按基准比例缩放”——基准就是设计稿的宽高比（通常是 16:9，即 1920×1080）。
立即学习“前端免费学习笔记（深入）”；
- 根元素
html的font-size动态算：document.documentElement.style.fontSize = window.innerWidth / 1920 * 100 + 'px';（100 是基准字号） - 所有字体、内边距、外边距统一用
rem，比如font-size: 1.2rem就等于 120px（在 1920 宽下） - 图表容器（如
<div id="chart">）必须设固定宽高，不能只写width: 100%；推荐height: 40vh; width: 60vw;，再配合 JS 监听resize调用chart.resize() - 慎用
transform: scale()全局缩放——Safari 旧版会模糊文字，且 Canvas 图表渲染失真
ECharts 初始化必须等容器尺寸稳定，否则报 "Cannot initialize ECharts instance before container is ready"
新手常把 echarts.init() 写在 DOMContentLoaded 里，但此时 DOM 虽挂载完成，容器可能还没计算出真实尺寸（尤其用了 grid 或 flex 布局时）。
正确时机是：容器节点存在 + getBoundingClientRect() 返回的宽高 > 0。
- 用
requestAnimationFrame延迟一次执行，比setTimeout更可靠 - 示例代码：
const chartDom = document.getElementById('chart');<br>if (chartDom && chartDom.getBoundingClientRect().width > 0) {<br> const chart = echarts.init(chartDom);<br> chart.setOption(option);<br>} else {<br> requestAnimationFrame(initChart);<br>} - 图表数据更新时，别直接
setOption覆盖全部配置，用chart.setOption({ series: [...] }, { notMerge: true })避免重绘开销 - 体积敏感项目，别引入完整
echarts.min.js，改用按需加载：import * as echarts from 'echarts/lib/echarts'; import 'echarts/lib/chart/line';
数据不能写死在 HTML 里，fetch 轮询要带节流，不然接口被刷崩
把 JSON 数据塞进 <script> 标签里，改一次就得重新部署——这不是大屏，是幻灯片。
真实场景下，数据来自后端 API，而新手常忽略并发控制，导致同一时间发 5 个未返回的请求，后端扛不住。
- 轮询用
setInterval即可，但必须加节流：let pending = false; setInterval(() => { if (!pending) { pending = true; fetch('/api/data').then(r => r.json()).then(render).finally(() => pending = false); } }, 3000) - 更优方案是用
AbortController：每次新请求触发前，先abortController.abort()上次未完成的请求 - 接口返回空或报错时，别让图表白屏——在
render函数里加 fallback：if (!data || data.length === 0) { chart.showLoading(); return; } - WebSocket 适合高频更新（如每秒刷新），但开发阶段调试麻烦；先用轮询跑通逻辑，再平滑升级
实际落地时，最易被忽略的是图表容器的宽高依赖父级布局计算顺序——grid 容器本身没设高，子项又用 100%，就会循环等待。务必保证根容器有 height: 100vh，且中间所有父级都透传高度（或用 min-height: 0 打破 flex/gird 的最小尺寸限制）。
