grid-template-areas在手机上不生效的根本原因是父容器未启用Grid布局；浏览器静默忽略该属性，必须在每个媒体查询中显式声明display: grid，且需同步调整grid-template-columns和grid-template-rows以匹配area位置。
grid-template-areas为什么在手机上完全不生效
根本原因不是写错了，而是父容器压根没走 Grid 布局。浏览器对 grid-template-areas 是静默忽略的——不报错、不警告、不渲染，直接退化成普通流布局。
- 必须在每个媒体查询里都显式写
display: grid，不能只靠继承或默认值 - 用开发者工具看 computed 样式里的
display值，而不是 rules 面板里有没有那行代码 - 如果用了 Tailwind，确保基础类如
grid已应用，否则md:grid-cols-2这类响应式类不会生效 - 复制粘贴示例时，中文空格、缩进空格、换行符都会让整行声明失效；建议写成紧凑单行：
grid-template-areas: "header header" "nav main"
如何让同一组面板在桌面和手机上自动重排
不能只改 grid-template-areas 字符串，必须同步重写轨道定义。area 名只是“标签”，真正起作用的是它所在的行列位置，而位置由 grid-template-columns 和 grid-template-rows 共同决定。
- 桌面端三列：
grid-template-columns: 240px 1fr 1fr→ 对应grid-template-areas: "header header header" "sidebar main main" - 手机端单列：必须同时改成
grid-template-columns: 1fr、grid-template-rows: auto auto auto，再配grid-template-areas: "header" "main" "footer" - 想跳过某个格子，用英文点号
.占位，比如"sidebar . chart"，比留空更安全且不易出错 - area 名严格限定为小写字母、数字、短横线（
user-stats❌，userstats✅），不能以下划线或数字开头
图表容器在小屏上塌陷看不见怎么办
常见错误是只设 aspect-ratio: 2/1，但父容器没有最小高度。Grid 会按内容撑高，空图表或加载中状态导致高度为 0，整个区域直接消失。
- 所有图表容器必须加
min-height: 200px（按业务最低可读高度定），再配aspect-ratio - canvas 元素本身别用 CSS 控制宽高；改用 JS 设置
canvas.width和canvas.height像素值，否则高清屏模糊 - 加载状态用
::before伪元素盖层，不要插入 DOM 的 loading div，避免 layout shift 破坏 Grid 稳定性 - 禁用
transform: scale()缩放整个仪表盘——高 DPI 屏幕下文字和线条会糊，且触控热区错位
@container 能替代 media query 吗
能，而且更精准。视口断点（@media）只能按屏幕宽度切，但一个卡片在侧边栏里和在主区里，可用宽度完全不同。容器查询让组件自己感知父容器尺寸，自主调整列数。
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器设
container-type: inline-size，再用@container (min-width: 400px)控制内部网格列数 - 避免重复写整套
grid-template-areas，只覆盖变化部分，比如桌面侧边栏存在时用"sidebar main"，小屏隐藏后改"main" - 非核心模块（如历史对比图）优先用
grid-area: none或display: none，别用visibility: hidden——它仍占布局空间 - 时间轴类组件窄屏改垂直堆叠 + 左侧固定时间戳，别硬压缩宽度导致文字折行混乱
minmax(0, 1fr) 这个写法。很多人用 1fr，结果长文本或 canvas 撑爆容器，整个仪表盘横向滚动。它不是锦上添花的技巧，而是防止布局崩溃的第一道防线。 
