用和css grid排布小图标面板最稳妥：统一图标尺寸（如48×48px），容器设display: grid、grid-template-columns: repeat(auto-fill, minmax(64px, 1fr))、gap: 8px，svg优先并确保含viewbox，png需srcset适配高清屏，alt写准确名称，外链加rel="noopener"。
怎么用 <img> 和 CSS Grid 快速排布小图标面板
直接用 <img> 标签加载徽标，配合 display: grid 控制行列布局最稳妥。别用浮动或 inline-block——容易错位、响应式难调。
常见错误是把所有图标塞进一个 <div> 却没设 <code>grid-template-columns，结果图标堆成一列或溢出容器。
- 每张徽标建议统一尺寸（如
width: 48px; height: 48px），避免网格单元格高度不一致 - 用
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr))实现自适应列数，比写死repeat(5, 1fr)更可靠 - 给容器加
gap: 8px比用margin更干净，不会在首尾多出空白
徽标路径和 alt 属性怎么写才不出错
本地开发时路径写错是图标不显示的主因；生产环境还常因相对路径解析失败导致 404。同时忽略 alt 不仅影响可访问性，还会让部分浏览器（如 Firefox）默认显示“图像”文字占位符，破坏面板整齐感。
- 推荐用相对路径：图标放在
./assets/icons/下，<img src="./assets/icons/react.svg" alt="React 徽标"> - 如果页面部署在子路径（如
/app/），用根相对路径：src="/assets/icons/vue.png" -
alt内容必须简洁准确，不要写“图标”或“logo”，直接写技术名或品牌名，比如alt="TypeScript"
如何让小图标在高缩放或高清屏下依然清晰
普通 PNG/JPG 在 Retina 屏上发虚，SVG 是首选；但不是所有 SVG 都适配——关键看有没有明确的 viewBox 和无固定宽高属性。
- 优先用 SVG：确保文件内含
viewBox="0 0 24 24"，且没写死width和height属性 - 若必须用 PNG，提供 2x 版本并用
srcset：<img src="node.png" srcset="node@2x.png 2x" alt="Node.js"> - 避免用 CSS 缩放图片（如
transform: scale(0.8)），会加剧模糊；改用width/height直接控制尺寸
点击图标跳转时，怎么避免新标签页打断用户流程
默认加 target="_blank" 会开新页，但没加 rel="noopener" 有安全风险（可能被 opener 访问 window 对象），而且用户返回原页时状态丢失。
- 外链必须加：
@#@#@#@#@#@#@#@#@#@0 - 内部链接（如跳到项目文档页）直接用
<a href="/docs/react"></a>，不加target - 如果想保留当前页状态又需轻量跳转，考虑用
router-link（Vue）或Link（React Router），但纯 HTML 场景就老实用<a></a>
网格项之间留够点击热区（至少 44×44px），移动端手指点不准的问题比想象中更常见。
