grid-template-areas需每断点同步重写三属性，小屏优先单列、区域名大小写敏感且用"."占位；卡片网格应嵌套auto-fit Grid而非百分比宽；指标用<dl>语义化；图表容器须设宽高或aspect-ratio；数据用data-属性注入。
grid-template-areas 必须每个断点都重写
它不是“开关”，而是静态草图。只在桌面端写一套 grid-template-areas: "header header header" "nav main sidebar"，小屏下照样横着排，结果要么横向滚动条弹出，要么卡片被压成细条——浏览器根本不会自动适配。
正确做法是：移动端优先定义基础结构，再用媒体查询覆盖。关键点有三个：
- 小屏下不设
grid-template-columns，让浏览器默认单列；设了反而干扰换行 - 每个断点里
grid-template-areas、grid-template-rows、grid-template-columns必须同步重写，漏一个维度就会回退到默认行为（比如高度失控） - 区域名大小写敏感、不能含中划线（
live_metrics✅，live-metrics❌），每行字符串列数必须对齐，缺位用"."占位，否则整条声明被忽略
主内容区卡片网格别用 width 百分比
写死 width: 33.333% 看似省事，实际一碰响应式就崩：文字换行撑高卡片、空数据时塌缩、不同卡片内容高度不一致 → 网格错位、间隙跳变、甚至内容被裁剪。
真正抗压的方案是在 main 区域内嵌套一层 Grid：
立即学习“前端免费学习笔记（深入）”；
- 用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))动态列数，不靠人脑算比例 - 配
gap: 1.5rem统一间距，别用margin搞乱流 - 卡片自身不设固定宽高，靠内容自然撑开；父容器加
align-items: stretch+height: 100%保证等高
指标卡片必须用 <dl> 而不是一堆 <div class="card">
直接堆 <div> 看似快，但 JS 一改数据就得同步修 class、aria-label、focus 状态，后期维护成本翻倍。而 <dl> 是语义化定义列表，天然支持无障碍阅读器、搜索引擎抓取和样式隔离。
结构要严格：
-
<dt>放指标名（如P95 延迟），<dd>放数值（如247ms） - 单位（
%、ms）必须和数字同级包裹，别塞进span还加float—— Flex 下用margin-left更稳 - 趋势箭头（↑↓）放
<dd>内部，或用aria-live区域单独托管
图表容器必须显式设宽高，且不能依赖内联 width/height
<canvas id="cpuChart" width="400" height="200"> 这种写法在高 DPI 屏上会模糊，且无法响应式缩放。ECharts 初始化时若容器无明确尺寸，echarts.init() 直接返回 null；Chart.js 的 responsive: true 也需父容器有可计算宽度。
安全写法只有两种：
- 给容器
div设width: 100%和固定height: 300px（不能是auto） - 或用 CSS aspect-ratio（如
aspect-ratio: 4 / 3），配合width: 100%实现等比缩放 - Canvas 自身去掉内联
width/height，改用 JS 根据devicePixelRatio动态设置canvas.width/canvas.height并缩放ctx.scale()
最常被忽略的是：所有这些规则的前提，是后端注入数据用 data- 属性而非内联 JSON。比如 data-value="247" data-target="300" data-trend="+12%"，而不是 data-config='{"value":247,"target":300}' —— 后者解析成本高、调试困难、XSS 风险高，还绕过了浏览器原生的数据抓取能力。
