dl默认垂直堆叠，小屏保持block流式布局；大屏用grid-template-columns: max-content 1fr实现横排，配合align-items: start对齐顶部，并通过媒体查询控制断点。
dl 本身没有内置响应式能力，但配合 CSS Grid 或 Flex 可以在不同屏幕下调整术语与描述的排列方式；别指望加个 @media 就自动“变响应”，关键在结构控制和断点逻辑。
怎么让 dl 在小屏上竖排、大屏上横排
默认 dl 是块级流式布局，dt 和 dd 垂直堆叠。要实现“小屏上下、大屏左右”的常见需求，不能靠 float 或 inline-block —— 容易错位、换行不可控。
- 用
display: grid最稳：grid-template-columns: max-content 1fr让术语左对齐、描述占满剩余空间 - 小屏断点（如
max-width: 768px）里把dl设为display: block，并重置dt和dd的 margin/padding，恢复默认垂直流 - 别给
dt加width或min-width—— 术语长度差异大会导致网格列宽崩坏，用max-content才能自适应 - 如果术语过长（比如 API 字段名含下划线或驼峰），加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis防撑破容器
dt 和 dd 横向并排时怎么避免错位
横向排列最常踩的坑是视觉对齐失效：一个 dt 高两行，旁边 dd 只有一行，结果底部不齐、间距诡异。
- 给
dl加display: grid; align-items: start，确保所有项顶部对齐（不是 baseline） - 禁用浏览器默认的
dd左侧 margin（Chrome 是 40px，Firefox 更大），统一设margin-left: 0 - 如果
dd内容含多段落或列表，用display: flex; flex-direction: column; gap: 0.25em控制内部间距，比纯margin更可靠 - 别用
vertical-align—— 它只对 inline 元素有效，而dt/dd默认是块级
多值描述或嵌套 dl 时怎么保持响应式不崩溃
比如一个参数有多个可选值，或某条描述里还要再列子字段，这时候嵌套 dl 很自然，但容易在响应式断点下失控。
立即学习“前端免费学习笔记（深入）”；
- 外层
dl的媒体查询规则必须显式覆盖内层 —— 否则内层可能继承错误的grid-template-columns - 嵌套
dl的dd里，优先用display: block+margin-top: 0.5em替代 grid，避免嵌套 grid 渲染异常 - 若需内层也横排，单独加 class 如
dl--inline，并在媒体查询中独立控制，不要复用外层规则 - 嵌套时务必闭合完整：
<dt>A</dt> <dd><dl> <dt>X</dt> <dd>1</dd> </dl></dd>，漏掉任意一个或都会导致后续所有内容被吞进同一个dd
真正难的不是写出来，而是当术语长度波动大、描述含代码块或链接、又得适配 iOS Safari 和旧版 Android WebView 时，grid-template-columns 的取值和 minmax() 的边界是否还成立——这时候得靠真实设备真机调试，而不是只看 Chrome DevTools 的模拟器。
