HTML创建成就徽章墙布局

本文深入解析了如何仅用纯 HTML 和 CSS（无需 JavaScript）构建一个专业、响应式且无障碍友好的成就徽章墙布局：通过 CSS Grid 的 `repeat(auto-fill, minmax(120px, 1fr)))` 实现真正等宽自适应网格，避免写死列数带来的小屏溢出或留白问题；利用 SVG 图标配合 `vertical-align: middle` 和 `em` 单位确保高保真居中与缩放适配；结合 `:hover` 与 `:focus-visible` 提供兼顾鼠标与键盘用户的可访问交互反馈；通过语义化 BEM 类名（如 `badge--earned`/`badge--locked`）高效管理状态样式，并强调 `min-width` 等易被忽视的细节来防止极端窄容器下的布局崩溃——一套轻量、健壮、符合现代 Web 标准的徽章系统实践方案。

怎么用 CSS Grid 实现徽章墙的等宽自适应网格

纯 HTML + CSS 就能搞定，不需要 JS 控制列数或响应式断点计算。关键在 grid-template-columns 用 repeat(auto-fill, minmax(...)) 模式。

• 写死列数（如 grid-template-columns: repeat(4, 1fr)）会导致小屏溢出或留白难看
• 用 minmax(120px, 1fr) 表示“每列至少 120px，最多均分剩余空间”，auto-fill 会尽可能多塞列
• 配合 gap: 12px 控制徽章间距，别只靠 margin —— Grid 的 gap 更可靠，不会影响对齐逻辑
• 容器必须设 width: 100% 或明确宽度，否则 auto-fill 在 inline 元素里可能失效

徽章图标怎么对齐居中又保持清晰

SVG 图标比 PNG 更稳妥，但直接丢进 容易拉伸变形或 baseline 错位。

• 给图标加 vertical-align: middle，解决行内元素默认对齐基线导致的上下偏移
• 用 width: 1.5em + height: 1.5em 替代固定像素值，让图标随字体缩放，适配暗色模式/缩放设置
• 如果用背景图 SVG，记得加 background-size: contain 和 background-repeat: no-repeat，否则高宽不一致时会被裁剪
• 避免用 font-size: 0 清除 inline 元素间隙 —— 它会让 SVG 的 em 单位失效，改用 display: grid 或 flex 包裹更干净

点击徽章触发反馈时，CSS :focus-visible 和 :hover 怎么配

既要键盘可访问，又要鼠标悬停友好，不能只写 :hover，否则盲用键盘 Tab 时看不到焦点。

• 先写 :hover 样式（比如背景变浅蓝），再单独写 :focus-visible（比如加 outline: 2px solid #007bff），后者优先级更高，且只在真实键盘聚焦时生效
• 别用 outline: none 全局去掉焦点框 —— 这是 WCAG 2.1 明确反对的可访问性破坏行为
• 如果徽章是 标签，确保有 href 属性（哪怕只是 href="#"），否则部分浏览器不触发 :focus-visible
• 移动端 Safari 对 :focus-visible 支持较晚（iOS 15.4+），老版本 fallback 可加 :focus，但注意它会在点击后短暂保留，体验略毛刺

徽章状态（已获得 / 未解锁）怎么用 class 控制样式差异