头像墙用纯HTML+CSS实现，核心是grid响应式布局、正方形缩放、懒加载与可访问性；需避免float/手动margin、background-image、错误断点及onclick伪跳转。
头像墙用纯 HTML + CSS 就能实现，不需要 JS 或框架；关键不是“怎么堆图片”，而是“如何让网格响应式、对齐整齐、缩放不糊、点击可交互”。
用 display: grid 控制等宽等高网格布局
头像墙本质是二维排列，grid 比 flex 更适合控制行列对齐和间距。常见错误是直接用 float 或一堆 div + margin 手动调，结果在不同屏幕下错位、间隙不均。
- 给容器设
display: grid，用grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))实现“最小 80px，自动填满，等分剩余空间” - 行高靠
aspect-ratio: 1 / 1强制正方形（现代浏览器支持），老版本可用padding-top: 100%+position: relative+ 绝对定位图片 - 间距统一用
gap: 12px，别混用margin，否则网格计算会出错
<img> 标签必须加 width、height 和 loading="lazy"
不设宽高会导致页面重排（layout shift），尤其头像数量多时，用户滚动时头像突然跳动；不加懒加载会在首屏加载全部头像，拖慢渲染。
- 写死
width="64" height="64"（或用style="width: 64px; height: 64px;"），配合object-fit: cover防止拉伸变形 - 务必加
loading="lazy"，否则 50 个头像全在首屏请求，可能触发浏览器并发限制，部分图片卡住不显示 - 避免用
background-image实现头像——无法语义化、不能右键保存、SEO 不友好、alt文本失效
响应式断点要按设备真实宽度设，别只看“手机/平板/桌面”
很多教程写 @media (max-width: 768px) 就切两列，但实际 iPad Pro 宽度是 1024px，却只显示两列太稀疏；而折叠屏手机展开后有 1200px，还卡在三列就浪费空间。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
min-width+ 渐进增强：默认 2 列 → ≥640px 用 3 列 → ≥960px 用 4 列 → ≥1280px 用 5 列 - 列数别超过 6，再多视觉上就成“条形码”，失去“墙”的感知；同时注意单列最小宽度别低于 60px，否则头像太小看不清五官
- 测试时真机打开 DevTools 的 Device Toolbar，选具体型号（比如 “iPhone 14 Pro Max”），别只信模拟器的分辨率数字
点击头像跳转时，<a> 包裹顺序和 tabindex 很关键
如果头像只是展示，没问题；但一旦要跳转个人主页或弹窗，就容易踩两个坑：一是焦点顺序混乱，二是键盘用户无法操作。
- 结构必须是
<a href="/u/123"><img src="..." alt="张三"></a>，不能把<a>放在<img>外层再套一层<div>，否则语义断裂 - 如果头像区域本身有 hover 效果（比如放大边框），记得给
<a>加tabindex="0"，否则键盘 Tab 键跳不到这个链接 - 别用
onclick+javascript:void(0)模拟跳转——破坏可访问性，且禁用 JS 时功能完全失效
真正难的不是画出网格，而是让每张头像在 Retina 屏不模糊、在低网速下快速占位、在读屏软件里正确朗读姓名、在键盘导航中自然流动——这些细节没处理好，用户第一眼觉得“丑”，其实是“不可用”。
