grid-template-areas 是大屏布局的底线选择，因其将语义与结构绑定，避免浮动和绝对定位在视口变化时失效；需配合相对单位、严格匹配的 grid-area、scale() 缩放及 overflow: hidden 等细节保障跨设备稳定渲染。
大屏管理系统布局不是“把页面撑满”就行，而是让 HTML 结构、CSS 布局和浏览器渲染行为协同稳定——否则换台 4K 屏、切个 Safari、地址栏一收，整个看板就错位或滚动条弹出。
为什么 grid-template-areas 是大屏布局的底线选择
浮动（float）和绝对定位（position: absolute）在大屏上极易失效：iOS Safari 地址栏收起时视口跳变，top/left 偏移；float 受行高、间隙、换行影响，缩放后模块堆叠或漏白。而 grid-template-areas 把语义和结构绑死，比如 “header map kpi-left” 一眼可读，改分辨率时只需调比例，不用重写逻辑。
实操要点：
- 根容器（如
.screen-container）必须设display: grid，子元素不能代劳 -
grid-template-rows和grid-template-columns全部用1fr、minmax(0, 1fr)等相对单位，禁用px固定值 -
grid-template-areas写成多行字符串，每行一个区域名，空格分隔列，换行分隔行（如"header header header" "map kpi-left kpi-right" "footer footer footer"） - 每个子模块必须带
grid-area属性，且值严格匹配grid-template-areas中定义的名称
scale() 缩放比 rem 更可靠，但必须配对控制 origin 和 overflow
rem 依赖 font-size 动态计算，在 1920×1080 到 3840×2160 跨度下，小数精度误差会逐层放大——字体、边框、间距全部错位。transform: scale() 是纯几何变换，无计算累积误差，更适合拉伸。
但只写 scale(1.5) 不够，容易偏移或溢出：
- 外层容器必须加
transform-origin: 0 0，否则内容从中心缩放，右下角被裁掉 -
overflow: hidden必须作用于html元素，仅写body无效（滚动由html接管） - 监听
window.resize时，只更新scale值，不要重绘 DOM 或图表实例 - 加
will-change: transform提升渲染性能，尤其在 Kiosk 模式下长期运行
DOM 结构失衡是卡顿根源，不是数据量问题
常见现象：50 个 ECharts 图表塞进一个 <main></main>，首次加载卡顿 300ms+；实时日志表格滚动白屏。根本原因不是 JS 慢，而是 DOM 树不平衡——单个容器子元素超 50 个，浏览器 layout 压力陡增。
优化方向很具体：
- 把大块区域拆成语义独立区块，如
<section class="panel-map"></section>、<section class="panel-kpi"></section>，既利于 Grid 布局，也方便 JS 局部更新 - 高频刷新模块（如日志流）必须从主 DOM 树剥离，用
documentFragment或独立<div id="log-view"> 托管 <li>避免 <code><div> 套 <code><div> 超过三层；能用 Flex/Grid 直接布局的，不额外加包裹层 <li> <code><canvas></canvas>和<svg></svg>容器别放在<header></header>或<main></main>内部做样式继承，易触发不必要的重绘 - 用
<col>预设宽度（如<col style="width: 120px">），禁用<th>/<code><td> 上的 <code>width属性 - 响应式列宽改用
@media控制<col>的width，不是在单元格里写min-width - 一次性渲染超 500 行？必须用
DocumentFragment分批插入，每批后加await new Promise(r => setTimeout(r, 0))让出主线程
table-layout: fixed 是大型数据表格的硬性开关
500 行 × 15 列的表格卡顿，不是因为数据多，而是浏览器默认用 table-layout: auto，得逐行扫描所有 <td> 内容算列宽——这一项就能压主线程 150ms+。
<p>必须显式启用并配合约束：</p>
<ul><li><code><table> 上直接写 <code>style="table-layout: fixed"，别指望 reset.css 或父级继承
真正难的不是写出能跑的代码，而是让所有模块在不同设备、不同浏览器、不同缩放状态下都保持位置精确、尺寸稳定、渲染不抖——这些细节没被压进 CSS 文件里，但全藏在 html 和 body 的 overflow、transform-origin、grid-area 这些字段的取值里。
