用<nav>包裹语义化<a>标签实现九宫格，CSS Grid配repeat(auto-fit, minmax(100px, 1fr))和gap自适应行列，aspect-ratio: 1/1加min-height: 88px保障触控与可访问性。
直接用 CSS Grid 就能实现响应式九宫格快捷入口，不需要 JS 驱动，也不必套用框架组件——只要 HTML 结构清晰、CSS 控制好行列和点击区域，就能兼顾语义性、可访问性和移动端适配。
HTML 结构怎么写才语义正确又方便维护
快捷入口本质是一组导航链接，<nav> 包裹 <a> 是最合理的语义结构。避免用 <div> + onclick 模拟跳转，否则屏幕阅读器无法识别，且禁用 JS 时完全失效。
- 每个入口用
<a href="xxx">，哪怕目标是#或javascript:void(0)，也应保留href属性（否则不是有效链接） - 图标建议用 SVG 内联或
<img>，避免纯 CSS 伪元素图标（不利于高对比度模式和部分读屏软件） - 文字内容必须存在，不要仅靠
title或aria-label替代可见文本
Grid 布局如何保证九宫格在不同屏幕下都整齐
用 display: grid 最省事，但关键在 grid-template-columns 和 gap 的组合。固定 3×3 不如用自适应列数，尤其在小屏上强行撑开反而导致横向滚动或文字溢出。
- 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))—— 在 100px 到 1fr 之间自动伸缩，小屏自动变单列，中屏双列，大屏三列 - 设
gap: 12px比用margin更可靠，不会因换行错位或父容器 padding 干扰布局 - 给每个
<a>设aspect-ratio: 1 / 1和display: flex，让图标+文字垂直居中，避免高度不一致导致网格塌陷
点击区域太小？移动端经常点不准的根源在这里
默认 <a> 的点击热区只有文字高度，手机上极易误触。这不是“加个 padding”就能解决的，得从盒模型和触摸事件机制入手。
立即学习“前端免费学习笔记（深入）”；
- 必须给
<a>设display: flex+flex-direction: column+justify-content: center，再配合min-height: 88px（符合 Material Design 推荐最小触控尺寸） - 避免只靠
padding扩展热区：如果内部图标或文字有margin，会把热区“撑开但不连续”，实际点击边缘可能无效 - 加上
touch-action: manipulation可减少 iOS Safari 的 300ms 点击延迟
图标字体（如 Iconfont）和 SVG 图标选哪个
优先用内联 SVG。图标字体在加载失败、字体未加载完、或系统禁用自定义字体时会显示方块或空白，而 SVG 是独立资源，可控性强。
- 内联 SVG 示例：
<svg width="24" height="24" viewBox="0 0 24 24"><path d="M12..." /></svg>，可直接用 CSS 控制fill - 如果必须用 Iconfont，确保
@font-face正确声明，并为<i>元素设font-size和line-height: 1，防止基线偏移导致垂直不对齐 - 别用
background-image加载图标：无法继承颜色、缩放失真、且无法被打印样式捕获
真正难的不是“画出九个格子”，而是让每个格子在各种设备、各种辅助技术、各种网络条件下都可点、可读、可缩放。很多项目后期才发现快捷入口在折叠屏上错行、在 Windows 高对比度模式下图标消失、或 VoiceOver 朗读时顺序混乱——这些问题全埋在最初那几行 HTML 和 CSS 里。
