车载HMI必须从HTML语义层重构：main和dialog不可替换为div，需严格遵循ARIA规范与DOM结构，确保语音导航、焦点流及模态交互正确触发；CSS须适配高DPI物理尺寸，断点用em单位，图片强制声明宽高，SVG内联且去焦点——语义错误将直接引发安全风险。
车载屏幕不是“大号手机”，直接套用移动端响应式逻辑会出问题：触控热区太小、焦点流断裂、语音指令无法识别语义结构——必须从 HTML 语义层开始重调。
为什么和
车载系统（如 Android Auto、CarPlay、鸿蒙车机）依赖 ARIA 和 DOM 语义触发语音导航与焦点跳转。main 不仅是 SEO 标签，更是语音引擎定位“当前操作主区域”的锚点；dialog 则明确告诉系统“这是模态操作，暂停其他交互”。用 div 替代会导致语音指令如“返回上一页”失效，或焦点卡死在隐藏按钮上。
- 每个页面只能有一个
main，且不能嵌套在header、nav或footer内——车载系统会忽略嵌套的main，降级为普通容器 - 弹窗类操作（如空调调节、导航确认）必须用
dialog而非div[role="dialog"]，否则部分车机 WebView（如旧版 QtWebEngine）不触发aria-modal="true"隔离行为 - 动态插入内容后，需同步设置
main的aria-live="polite"，否则语音播报延迟超过 800ms 就会被车机系统丢弃
flex-wrap + min-width 在仪表盘卡片布局中的陷阱
车载横屏常见宽度为 1280px（16:9）或 1920px（高清屏），但物理尺寸小、DPI 高，导致 CSS 像素密度远高于桌面。设 min-width: 320px 的卡片在 1280px 宽度下只排 4 列，实际触控区域不足 24mm × 24mm（低于 ISO 9241-410 最小推荐值）。
- 优先用
min-width: 12rem（基于根字号计算）而非像素值，适配不同 DPI 下的物理尺寸缩放 - 对关键操作卡片（如“导航”“电话”“媒体”），加
flex-basis: 20rem强制保宽，防止高缩放比下被压缩变形 - 禁用
flex-direction: column-reverse——多数车载 WebView（尤其 WebKit-based）不支持该值，会导致视觉顺序与 DOM 顺序错位，破坏方向盘旋钮焦点流
@media 断点必须绑定 viewport 缩放而非像素宽度
车载系统常强制启用 initial-scale=1.0 且禁用用户缩放，但系统级字体缩放（如鸿蒙“显示大小”设置）会影响 rem 计算。单纯按 min-width: 1280px 切断点，会在 120% 字体缩放时让 1280px 视口实际渲染宽度变成 1067px CSS 像素，断点失效。
立即学习“前端免费学习笔记（深入）”；
- 断点统一用
em单位：@media (min-width: 80em)（≈1280px @16px 默认字号），并确保html的font-size不被车机 UI 框架覆盖 - 避免
max-width与min-width混用：例如@media (max-width: 1279px)和@media (min-width: 1280px)在缩放 115% 时会产生 1279.5px 空白区间，车机渲染直接 fallback 到默认样式 - 关键布局切换点（如导航栏从图标+文字变为图标-only）应基于内容溢出检测，而非设备宽度——用浏览器 DevTools 的 “Capture node screenshot” 功能测真实物理尺寸，再反推 em 值
必须带 width/height 且禁用 object-fit: cover
车载屏幕多为固定分辨率（如 1280×480 条形屏），图片加载抖动会干扰驾驶员注意力。更严重的是，object-fit: cover 在部分车机 WebView（如 Chromium 89 以下）中渲染异常，导致图像拉伸变形或黑边闪烁。
-
img或picture必须显式声明width和heightHTML 属性，值按物理像素设定（如width="1280" height="480"），CSS 中再用width: 100%; height: auto;保持比例 - 背景图一律用
background-size: contain，禁用cover——前者保证完整信息可见，后者可能裁掉关键图标（如“限速标志”“电池电量”） - SVG 图标优先于 PNG/JPEG，且内联写入 HTML（避免 HTTP 请求延迟），
<svg aria-hidden="true"></svg>配合focusable="false"防止键盘焦点落入装饰性图形
车载响应式真正的难点不在 CSS 写多少行，而在 HTML 结构是否能让车机系统“读懂意图”：一个没闭合的 main、一张没设 height 的 picture、一段被 display: none 掩盖却仍存在于 DOM 的按钮——这些都会在高速行驶场景下放大成交互失败或安全风险。
