移动端响应式步骤指示器需竖屏垂直堆叠、横屏（如平板）才水平排列；关键在容器流式行为与子项尺寸约束同步，须删 min-width、用 flex: 1 1 auto、加 max-width: 100%，并以 min-width + orientation 双重媒体查询替代单 orientation 判断。
移动端响应式步骤指示器的排列方向切换
手机竖屏时步骤必须垂直堆叠，横屏（比如平板横置）才允许水平排列——这不是靠媒体查询简单切 display 就能稳住的，关键在容器流式行为和子项尺寸约束是否同步生效。
flex-wrap + min-width 导致的“横屏不换行”假象
很多人用 display: flex + flex-wrap: wrap 想让步骤在窄屏自动折行，结果横屏下反而挤成一排还溢出。问题不在 flex，而在每个步骤项写了固定 min-width: 200px 这类值，横屏时容器变宽，但子项宁可撑破也不收缩，flex-wrap 根本没机会触发。
- 删掉所有步骤项上的
min-width或设为min-width: 0 - 用
flex: 1 1 auto替代flex: 1，确保缩放行为可控 - 给容器加
max-width: 100%，防止内部文字撑开父容器
@media 中 width 和 orientation 的优先级冲突
写 @media (orientation: landscape) 本意是横屏启用横向布局，但某些安卓浏览器会把“宽屏手机竖着拿”也判为 landscape（因设备像素比高），导致步骤在竖屏手机上意外横排。更稳的方式是用宽度断点+ orientation 双重判断。
- 改用
@media (min-width: 768px) and (orientation: landscape) - 避免单独依赖
orientation，它不反映实际可用宽度 - 在 iPhone SE 等小屏设备上，即使横屏，
width仍可能，此时保持竖排才是合理体验
步骤数字和连接线在旋转时的错位
竖排时连接线用 ::after 画一条向下竖线，横排时想改成向右横线——但如果只改 height/width，旋转后线条起点偏移、数字文字基线不对齐，视觉上就“飘”了。
立即学习“前端免费学习笔记（深入）”；
- 统一用
transform: translateY()或translateX()控制线条位置，别依赖 margin - 数字圆圈用
flex-shrink: 0锁定尺寸，防止文字缩放影响布局 - 连接线容器设
position: relative，线条用position: absolute定位，脱离文档流避免干扰
真正难的不是怎么写 CSS，而是得在真机上反复横竖切换，看有没有哪一步骤突然跳位、文字被裁、连线断开——这些细节不会出现在 devtools 模拟器里。
