徽章高清适配需用 + min-resolution 区分像素密度，网格布局用 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr))，悬停动效须包裹容器并限定 transition 属性，状态控制推荐 css 自定义属性 --state。
徽章元素怎么用 <picture></picture> 实现高清适配
直接用 <img> 加 srcset 容易在高 DPI 屏幕上模糊，尤其徽章这种带细边框、小图标的图形。必须用 <picture></picture> + <source></source> 控制不同设备的资源加载。
关键点：不是只按屏幕宽度切，要按像素密度（x 单位）分发：
<picture><source media="(min-resolution: 2dppx)" srcset="badge-pro@2x.png"><source media="(min-resolution: 3dppx)" srcset="badge-pro@3x.png"> @@##@@ </source></source></picture>
-
min-resolution: 2dppx比min-width更准——iPad Pro、MacBook Retina 都靠它触发 - 不要省略 fallback 的
<img src="badge-pro.png" alt="专业认证徽章">，否则 Safari 旧版或禁用 JS 的环境会空白 - 所有徽章 PNG 必须统一尺寸（如 120×120px），否则 CSS 布局会错位
徽章墙网格布局用 display: grid 还是 flex
用 flex 做“一行流”容易在小屏上挤成一长条，且无法控制行列对齐；grid 才能真正实现响应式矩阵。
推荐写法（不依赖媒体查询）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.badge-wall {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 16px;
}
-
auto-fill而非auto-fit：确保空列也占位，避免徽章突然跳行 -
minmax(140px, 1fr)中的140px是徽章最小可读宽度，低于此值文字会糊——别设成 100px - 加
gap不要用margin，否则最后一行右对齐时会出现意外留白
徽章悬停动效为什么不能只用 transform: scale()
单纯放大徽章会导致父容器重排（reflow），整个网格抖动；更糟的是，没加 will-change: transform 时，Chrome 在低端 Android 上掉帧明显。
- 必须包裹一层
<div class="badge-wrapper">，把 <code>scale应用在子元素上，父容器高度固定 - 过渡要限定属性：
transition: transform 0.2s ease, opacity 0.2s ease，别写all，否则阴影变化也会触发重绘 - 移动端慎用
:hover，iOS Safari 点击后会残留 hover 态——得加@media (hover: hover)包裹 - 灰度 + 透明度组合比纯
opacity更准确：未解锁徽章需要视觉降级，但图标轮廓仍需可辨 - 如果徽章带进度条（如“完成 70%”），
--progress变量配合clip-path: inset(0 0 0 calc(100% - var(--progress)))实现裁剪动画，比 JS 操控 width 更流畅
徽章状态（已获得 / 未解锁 / 进行中）怎么用 CSS 变量控制
硬编码三套 class（badge--locked / badge--active）会让 HTML 膨胀，且 JS 更新状态时要反复切换 class。改用 CSS 自定义属性更干净。
HTML 只需一个属性：<div class="badge" style="--state: locked">
<p>CSS 中用属性选择器驱动样式：</p>
<pre class="brush:php;toolbar:false;">.badge[style*="locked"] {
opacity: 0.4;
filter: grayscale(1);
}
.badge[style*="active"] {
box-shadow: 0 0 0 4px #4f46e5;
}</pre>
<ul>
<li>别用 <code>[data-state="locked"]——JS 修改 dataset 不触发 CSS 重计算，而 style 属性变更会立即生效
徽章墙真正的难点不在布局或动效，而在状态同步和资源加载边界——比如用户刚领取徽章，缓存的 badge-new.png 还没更新，或者网络中断时 fallback 图标缺失。这些情况没法靠 CSS 解决，得在 JS 层加 img.onerror 回退和 SW 缓存版本控制。
