用媒体查询配合flex-direction: column实现竖排，统一用gap控制间距，结合clamp()缩放字体和圆点，确保状态色在小屏下有足够对比度。
响应式步骤条怎么让节点自动竖排？
用 flex-direction 控制主轴方向是最直接的办法。横屏默认水平，竖屏切垂直，关键不是“加样式”，而是“在合适断点改方向”。别写死 flex-direction: column，否则横屏也竖着，反而破坏阅读流。
- 用媒体查询监听宽度，比如
@media (max-width: 768px)覆盖移动端常见竖屏宽度 - 确保父容器是
display: flex，否则flex-direction不生效 - 避免对每个
.step单独设width: 100%—— flex 项默认不撑满，该撑满的是父容器或用flex: 1
为什么用 flex 而不用 grid？
grid 确实能做，但步骤条本质是线性序列，flex 更轻量、语义更准、兼容性更好（IE11 都支持 flex-direction，而 grid 在 IE 中需额外前缀且行为不一致）。除非你要做复杂交错布局（比如步骤带侧边说明），否则没必要上 grid。
-
flex的justify-content和align-items更容易控制节点间距和对齐 -
grid在小屏幕下容易因grid-template-columns写死导致换行异常，反而难调 - 如果真用
grid，必须配合grid-auto-flow: column+ 媒体查询，比flex多一层心智负担
flex-direction: column 后节点间距乱了？
因为垂直排列时，原来控制水平间距的 margin-right 或 gap 可能失效或方向错位。重点不是删 margin，而是统一用 gap —— 它会自动适配主轴方向。
- 把
margin全换成gap（如gap: 24px），它在column下变成上下间距，在row下变成左右间距 - 如果用了
gap还不对，检查是否父容器有align-items: stretch导致高度不一致，可加align-items: flex-start统一顶部对齐 - 避免在子项上写
margin-bottom同时又用gap，二者叠加会导致间距翻倍
竖屏下步骤数字和文字挤在一起？
这不是排列问题，是尺寸没随屏幕缩放。纯靠 rem 或 em 不够，得结合视口单位或媒体查询做阶梯调整。
立即学习“前端免费学习笔记（深入）”；
- 数字圆点用
width/height+font-size一起缩放，比如font-size: clamp(14px, 4vw, 18px) - 文字内容行高别写死
line-height: 1.2，改用无单位值（如line-height: 1.4），让它随字体自然缩放 - 如果用了伪元素画圆点（
::before），确保transform: scale()或width/height也参与响应式计算，否则小屏下圆点可能比文字还大
