车载大屏HTML需严格遵循车规：main/dialog必须原生元素且唯一，断点用em单位，全屏缩放用transform:scale()，Grid布局各断点须重写template-areas。
车载大屏控制系统不是“放大版手机网页”，HTML布局一旦偏离车规语义或物理交互约束，轻则焦点错乱、语音失效，重则触发ASIL-B级安全校验失败。必须从 DOM 结构、CSS 单位、缩放机制三处同步卡死。
main 和 dialog 不能用 div 替代
车载系统（Android Auto / CarPlay / 鸿蒙车机）依赖 ARIA 语义驱动语音导航和方向盘旋钮焦点流。main 是语音引擎定位“当前操作主区域”的唯一锚点；dialog 则强制激活 aria-modal="true" 隔离行为。用 div 加 role="main" 或 role="dialog" 在旧版 QtWebEngine 或 WebKit-based 车载 WebView 中根本不会触发模态隔离，导致用户按“返回”键卡死在隐藏按钮上。
- 每个页面只能有一个
main，且不能嵌套在header、nav或footer内——嵌套的main会被车机直接忽略 - 弹窗类操作（空调调节、导航确认）必须用原生
dialog元素，而非div[role="dialog"] - 动态插入内容后，需手动设置
main的aria-live="polite"，否则语音播报延迟超过 800ms 就被丢弃
断点必须用 em，不能用 px 或 vw
车载系统强制 initial-scale=1.0 且禁用用户缩放，但系统级字体缩放（如鸿蒙“显示大小”设为 125%）会改变 rem 基准。按 min-width: 1280px 写断点，在 125% 缩放下实际视口宽度只剩 ~1024px CSS 像素，断点完全失效。
- 断点统一写成
@media (min-width: 80em)（≈1280px @16px 默认字号），并确保html的font-size不被车机 UI 框架覆盖 - 禁止混用
max-width与min-width：例如@media (min-width: 768px) and (max-width: 1024px)在高 DPI 屏上极易漏匹配 -
flex-wrap+min-width组合陷阱：设min-width: 320px的卡片在 1280px 宽度下只排 4 列，触控热区不足 24mm × 24mm（低于 ISO 9241-410 推荐值）——应改用min-width: 12rem
全屏渲染必须用 transform: scale()，别碰 rem
大屏驾驶舱要求的是“等比拉伸”，不是“响应切换”。用 rem + 媒体查询做适配，会在 1920×1080 到 3840×2160 跨度下导致字体、边框、间距全部错位——设计稿是按某一分辨率切图的，而车机大屏运行时分辨率不可控。
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
立即学习“前端免费学习笔记（深入）”；
- 用
transform: scale()对整个#app容器做一次性缩放，例如scale(2)对应 4K 屏 - 所有尺寸单位统一用
px，靠 JS 计算缩放比：const scale = window.innerWidth / 1920 - 监听
resize只更新transform，不重新渲染 DOM 结构 -
scale会影响canvas像素密度，需同步调整canvas.width/canvas.height和style.width/style.height
Grid 布局中 grid-template-areas 必须每个断点重写
grid-template-areas 是静态草图，不是响应式开关。浏览器只按当前生效的声明分配位置，不会自动缩放或重排。你写一套三栏布局，小屏下照样横着塞，结果要么横向滚动条弹出，要么卡片被压成细条。
- 必须为每个关键断点（如
@media (max-width: 768px)、@media (min-width: 1024px)）单独重写整套grid-template-areas、grid-template-rows、grid-template-columns - 区域名大小写敏感、不能含中划线（
live-metrics❌，live_metrics✅），每行字符串列数必须对齐，缺位用"."占位 - 移动端优先结构示例：
grid-template-areas: "header" "nav" "main" "sidebar" "footer"，配套grid-template-rows: auto auto 1fr auto auto，不设grid-template-columns - 主内容区内部要用嵌套 Grid +
auto-fit+minmax()，别用width: 33.333%——文字换行、空数据塌缩、高度不一致都会导致网格崩坏
真正难的不是写多少媒体查询，而是让每个 main 都能被语音识别到，让每个 dialog 都能阻断方向盘焦点，让每行 grid-template-areas 字符串都对齐——这些细节不校验，上线后就不是样式错位，而是功能失灵。
