用 CSS Grid 实现响应式阶梯进度条需设 display: grid 和 auto-fit 列布局，用伪元素画圆点与横线，通过 data-active 控制状态，IE11 降级用 Flex+显式宽度，须兼顾无障碍与垂直居中一致性。
用 CSS Grid 实现可响应的阶梯进度条
纯 CSS 实现阶梯式进度条，关键不是用 progress 元素（它不支持阶梯状），而是靠 grid 布局 + 伪元素控制连接线与步骤点。Grid 能精准对齐「步骤圆点」和「中间横线」，且天然支持等宽自适应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 容器设为
display: grid，用grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))实现响应式列数 - 每个步骤项用
::before画圆点，::after画右侧横线（最后一项除外） - 激活状态通过给对应步骤项加
data-active="true"，用属性选择器控制颜色和横线长度 - 避免用
float或绝对定位——会导致横线对不齐、缩放时错位
JavaScript 动态更新步骤状态时的 DOM 操作要点
手动切换步骤（比如点击下一步按钮）时，别直接操作 class 列表拼接字符串，容易漏删旧状态或重复添加。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
element.dataset.active = "true"/"false"控制状态，CSS 侧用[data-active="true"]匹配 - 横线长度依赖相邻步骤是否都激活：只有当前项和下一项都为
active时，才显示完整横线；否则截断（可用clip-path或控制width） - 不要在循环里反复调用
querySelectorAll，缓存节点列表，用Array.from()转成数组再遍历 - 移动端点击区域小？给步骤项加
min-height: 44px和padding，但别改圆点尺寸本身
IE11 兼容方案：用 Flex 替代 Grid 的取舍
如果必须支持 IE11，Grid 会失效，得降级到 flex + 显式宽度计算。这不是“加个前缀”能解决的，是布局模型切换。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports not (display: grid)包裹 Flex 方案，避免覆盖现代浏览器样式 - Flex 下横线要用单独的
<div class="step-connector">元素，不能靠伪元素——IE11 对::after在 flex 容器里的定位支持极差 - 步骤圆点用
margin-left: -16px往左微调对齐，因为 Flex 无法像 Grid 那样精确定义轨道起点 - 放弃自动响应列数：IE11 下固定写死
flex: 0 0 25%（4步）或flex: 0 0 33.33%（3步），用媒体查询分段适配
无障碍与语义化：别让屏幕阅读器读成“一堆圆点”
阶梯进度条本质是流程导航，但默认只是视觉呈现，对屏幕阅读器不可见。用户可能卡在第二步却不知道当前处于第几步。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个步骤项加上
role="region"和aria-labelledby指向内部标题 - 用
aria-current="step"标记当前激活项（比aria-selected更准确） - 隐藏装饰性横线：给
.step-connector加aria-hidden="true" - 别用
visibility: hidden隐藏未完成步骤文字——它仍会被读出；改用clip-path: inset(100%)或position: absolute; left: -9999px
最易被忽略的是横线与圆点的垂直居中一致性：不同字体、行高、box-sizing 下，top: 50% 可能偏移几个像素。建议所有圆点用 transform: translateY(-50%)，横线用 align-self: center（Grid）或 align-items: center（Flex），而不是依赖 margin 或 top。
