用 CSS Grid 实现徽章墙需使用 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))) 实现等宽自适应，配合 gap 控制间距；SVG 图标用 vertical-align: middle 和 em 单位确保居中与缩放；状态通过 badge--earned/badge--locked 类控制，焦点交互兼顾 :hover 与 :focus-visible，并设置 min-width 防止过度压缩。
怎么用 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 更稳妥，但直接丢进
- 给图标加
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 控制样式差异
靠 class 切换比用 JS 动态增删属性更轻量，也方便服务端直出。
- 基础类名统一用
badge，状态用badge--earned和badge--locked，避免语义模糊的active或disabled -
badge--locked推荐加opacity: 0.5+cursor: not-allowed，但别禁用 pointer-events —— 否则屏幕阅读器无法读取aria-label - 解锁动画慎用
transform: scale()，容易触发重排；用opacity+filter: blur()渐变更稳 - 如果徽章带文字说明，未解锁状态建议保留文字但灰掉，而不是
display: none—— 屏幕阅读器会跳过，用户不知道这徽章存在
最常被忽略的是容器的 min-width 设置：当所有徽章都 minmax(120px, 1fr)，但父容器太窄（比如嵌在 sidebar 里只有 200px 宽），Grid 会强行压缩到最小值并撑高行高。这时候得加 min-width: 120px 到单个徽章上，或者用 grid-auto-flow: column 换成横向滚动 —— 看业务场景选，不是所有“自适应”都该牺牲布局方向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
