应使用 ol + li 构建语义化步骤条，ol 天然表达顺序与进度，配合 counter-reset 和 ::before 控制编号；通过 flex 布局与 min-width 实现横竖自适应，避免 list-style: none 破坏语义。
用 ol + li 搭建语义化步骤条结构
响应式步骤条不是靠一堆 div 堆出来的，优先用 ol（有序列表）——它天然表达「顺序」和「进度」，对屏幕阅读器友好，也方便后续用 CSS 控制编号逻辑。每个步骤用 li 包裹，内容里别塞太多嵌套，保持扁平：
<ol class="step-bar"> <li class="step active">填写信息</li> <li class="step">验证身份</li> <li class="step">完成注册</li> </ol>
注意：别给 ol 设 list-style: none 就直接删编号，那样会破坏语义。编号该由 CSS 的 counter-reset 和 ::before 重置控制，保留原生序号能力。
用 Flex + min-width 实现横向到纵向的自动断点
小屏下强行横排会溢出或缩得太小，必须让步骤条在一定宽度下自动转为竖排。关键不是媒体查询“写几段”，而是用 Flex 的弹性 + 最小宽度触发重排：
-
.step-bar设display: flex、flex-wrap: wrap - 每个
.step设flex: 1 1 calc(33.333% - 1rem)（三步时），同时加min-width: 200px - 当容器宽度 .step 的
min-width开始起效，自动换行堆叠
比纯媒体查询更鲁棒——不用硬编码断点值，也不依赖 JS 判断宽度。
用 position: relative + ::after 绘制连接线，避开绝对定位偏移问题
步骤之间的连线如果用绝对定位的伪元素，容易因字体大小、行高变化导致错位。稳妥做法是把连线画在 li 内部，用相对定位锚定：
.step:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -1rem;
width: 2rem;
height: 2px;
background: #ccc;
transform: translateY(-50%);
}
但前提是 .step 必须设 position: relative，否则 ::after 会相对于最近的定位祖先找位置，常导致线条飘走。另外，right: -1rem 要配合父容器 padding 预留空间，否则会被裁剪。
移动端点击区域太小？用 padding 扩展可触控范围，别只改 font-size
步骤文字在手机上看着够大，但手指点不准——因为默认点击热区只覆盖文字本身。解决方法很简单：
- 给
.step加padding: 1rem 1.25rem（上下留空防误触，左右撑开） - 同时设
cursor: pointer和touch-action: manipulation提升响应感 - 避免只调大
font-size，那会让布局撑开却不增加热区
真机测试时，用 Chrome DevTools 的「Toggle device toolbar」+「Show rulers」看实际热区是否连贯，尤其注意步骤之间间隙是否留白过大或过小。
最易被忽略的是状态同步：如果步骤条靠 JS 切换 active 类，务必确保 history.pushState 或 hashchange 也能驱动更新，否则刷新页面就丢失当前步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
