ol本身不响应式，真正决定自适应的是CSS控制方式；直接调list-style-type或start无法解决缩进错位、多行对齐混乱、大序号撑屏等问题，需用CSS计数器+display:table实现真自适应。
ol 本身不响应式，它只是语义容器；真正决定“是否自适应”的是 CSS 控制方式——直接调 list-style-type 或 start 不解决缩进错位、多行换行混乱、超长序号挤压内容等问题。
为什么直接写 ol + 媒体查询常失效
常见做法是给 ol 加 padding-inline-start: 0 再用 @media 调 padding-left，但问题立刻浮现：
- 序号被裁切：
padding-inline-start: 0后，浏览器仍按默认list-style-position: outside渲染，序号画在盒外，一清边距就消失 - 多行文本不对齐：第二行文字从序号起始位置左对齐，而非与第一行文字首字母对齐
- 大序号撑爆窄屏：比如
start="99999"，固定padding-left: 2em在手机上留白过大或文字溢出 -
reversed和type在小屏下视觉密度失控：type="i"的viii在 320px 宽度里几乎不可读
用 CSS 计数器 + display: table 实现真自适应
这是目前唯一无需改 HTML、兼容所有序号长度、保留屏幕阅读器识别能力的方案。核心是把序号和内容拆成两列，让表格自动分配宽度：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
.responsive-ol {
padding-inline-start: 0;
list-style: none;
counter-reset: ol-counter;
}
.responsive-ol li {
display: table-row;
counter-increment: ol-counter;
}
.responsive-ol li::before {
content: counter(ol-counter) ".";
display: table-cell;
text-align: end;
padding-inline-end: 4px;
width: 1px; /* 关键：触发最小内容宽度 */
}
.responsive-ol li > * {
display: table-cell;
width: 100%;
}-
width: 1px是 trick：强制浏览器按内容（如 “1.”、“1000.”）撑开序号列，窄屏下自动收缩，宽屏下自然延展 -
display: table-cell确保多行文本始终与第一行文字左边界对齐，不是序号右边界 - 保留原生
ol结构，aria-setsize/aria-posinset仍可手动补充，无障碍不打折 - 不依赖
start或reversed属性，它们只影响原生渲染，而计数器完全可控
ol 嵌套时缩进与字号的响应式控制
多级目录（如 2.1.3.1）不能靠 margin-left 累加，各浏览器 UA 默认值不一致（Chrome 40px / Firefox 2em），且缩放时失准：
立即学习“前端免费学习笔记（深入）”；
- 统一重置：
ol { margin-left: 0; padding-left: 1.5em; }，配合list-style-position: outside（保持默认） - 子级字号用
clamp()：如font-size: clamp(0.875rem, 1.2vw, 1rem)，避免小屏嵌套过密 - 禁止在
summary里直接写ol：必须把子ol包在父details的summary闭合前，否则移动端展开逻辑失效 - 锚点必须包裹文本：写
<a href="#sec2">第二章</a>，别只包标签外层，否则键盘 Tab 无法聚焦
表格内 ol 排版崩坏的修复要点
在 <td> 里放 <code>ol，默认样式会顶破单元格、换行错位、符号被裁：
- 必须重置：
td ol { margin: 0; padding-left: 1.5em; list-style-position: inside; } -
list-style-position: inside让序号纳入盒模型，避免outside下被border或overflow截断 - 加
white-space: normal到td，防长文本（如 URL）不换行撑裂表格 - 禁用
ol的width：表格列宽由table-layout: auto或max-width控制，ol自身不该设宽 - 隔离样式：用
table td > ol而非全局ol，避免污染导航栏等其他列表
最易被忽略的是：序号对齐本质是「内容流」问题，不是「数字格式」问题。哪怕你用 type="I" 或 JS 生成中文数字，只要没处理好 display 模式和 padding 机制，窄屏下照样错位。动手前先打开 DevTools 看 computed list-style-position 和 padding-inline-start 值，比猜快十倍。
