头像墙用纯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”），别只信模拟器的分辨率数字
点击头像跳转时，@#@#@#@#@#@#@#@#@#@0，不能把 <a></a> 放在 <img src="..." alt="张三"> 外层再套一层 <div>，否则语义断裂
<li>如果头像区域本身有 hover 效果（比如放大边框），记得给 <code><a></a> 加 tabindex="0"，否则键盘 Tab 键跳不到这个链接
onclick + javascript:void(0) 模拟跳转——破坏可访问性，且禁用 JS 时功能完全失效真正难的不是画出网格，而是让每张头像在 Retina 屏不模糊、在低网速下快速占位、在读屏软件里正确朗读姓名、在键盘导航中自然流动——这些细节没处理好，用户第一眼觉得“丑”，其实是“不可用”。
