用 display: grid + minmax(300px, 1fr) 和 auto-fit 实现响应式卡片网格，配合 min-width: 0 防溢出、align-items: start 保对齐；卡片精简字段（name/method/path 为必选），用 <details> 原生折叠，构建时注入状态并辅以轻量 JS 更新。
怎么用纯 HTML + CSS 实现响应式 API 卡片网格
直接用 display: grid 搭配 minmax() 和 auto-fit 就能撑起基础布局，不用 JS 或框架也能适配桌面到平板。关键不是“怎么画卡片”，而是让每张卡片在不同宽度下自动重排、不溢出、不拉伸变形。
- 卡片容器设
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))—— 这比写死 3 列更可靠，小屏自动缩成 1 列，大屏填满不留白 - 每张卡片用
min-width: 0防止内部文本（比如长 URL）撑破网格项，这是 Chrome/Firefox 常见的隐性溢出源 - 避免对卡片设固定高度；用
align-items: start保证顶部对齐，否则文字多的卡片会把整行往下顶 - 别用
float或inline-block模拟网格，它们在 flex/grid 已原生支持的今天，只会增加断点调试成本
API 卡片里该放哪些字段才真正有用
开发者扫一眼就要知道能不能用，不是展示设计感。字段堆太多反而降低扫描效率，字段顺序错位会直接拖慢集成速度。
- 必放前三项：
name（接口名，加粗）、method（GET/POST等，用<span>包裹并设背景色）、path（如/v1/users，保持等宽字体） - 可选但高价值：
status（beta/deprecated标签，用data-status属性便于后续 JS 控制显隐） - 别放“调用示例”或“返回结构”在首页卡片里——这些属于详情页内容，放了反而让卡片变重、加载慢、移动端难滑动
- 所有字段用
title属性补全说明，比如title="仅限企业版用户调用"，鼠标悬停即见，不占视觉空间
为什么 <details><summary> 比手写 JS 折叠更稳妥
很多团队自己写 toggle() + classList 控制展开收起，结果在 Safari 15.4 或某些安卓 WebView 里动画卡顿、状态不同步。原生 <details> 兼容性已覆盖所有现代浏览器，且自带语义和键盘导航支持。
- 折叠区内容直接塞进
<details>内部，不用额外写 JS 监听点击 - 用
open属性控制默认展开（如<details open>），比 JS 设置style.display更轻量 - 样式定制靠
details[open] > summary::after改箭头方向，避免用 JS 操控 class 切换图标 - 注意：不要给
<details>设height: 0或overflow: hidden，这会破坏原生行为，导致 Safari 下无法展开
静态 HTML 门户如何支持 API 状态实时更新
纯 HTML 页面没法主动轮询，但可以通过简单约定让状态“看起来是活的”：用构建时注入 + 客户端轻量 fallback。
立即学习“前端免费学习笔记（深入）”；
- 构建脚本（如 Node.js 脚本）在生成 HTML 前，请求一次
/api/status接口，把结果写进卡片的data-last-checked和data-health属性里 - 页面加载后，用 2KB 以内的 JS 检查当前时间与
data-last-checked是否超 5 分钟，超了就 fetch 新状态并更新卡片背景色（data-health="unstable"→ 加红边） - 不依赖 Service Worker：它在首次访问后才生效，新用户打开首页时看到的仍是过期状态
- 别在 HTML 里硬编码 “Last updated: 2024-06-12 14:30” —— 这种时间戳没人信，还容易被缓存住长期不更新
卡片布局看着简单，但字段取舍、状态同步、响应式断点这几个地方，改一次样式可能牵出三个环境兼容问题。动手前先跑一遍 iOS Safari 和 Chrome Android 的真机预览，比写完再调强得多。
