@media (orientation: portrait/landscape) 用于响应屏幕旋转状态，仅在移动设备可靠，需配对使用并配合flex/grid布局，避免混用width断点，且须同步调整字体、颜色、间距等交互要素。
用 @media (orientation: portrait) 和 @media (orientation: landscape) 区分方向
直接监听设备物理朝向最直观，但要注意它只反映屏幕当前旋转状态，不等同于宽度。比如 iPad 横屏时 screen.width > screen.height，但某些 Android 设备可能返回错误的 window.orientation 值，所以不能单靠 JS 判断。
实际写法必须配对使用：
-
@media (orientation: portrait)里设竖屏主布局（如侧边栏在左、内容区占满宽度） -
@media (orientation: landscape)里切横屏结构（如侧边栏上置、内容区左右分栏） - 两者都得确保父容器有
display: flex或display: grid，否则方向切换无效 - 别混用
orientation和min-width—— 同一设备旋转时宽度不变，orientation会触发，min-width不会
flex-direction 切换时为什么节点间距错乱？
因为 margin 是固定方向的，而 flex-direction 改变后主轴翻转，原来写死的 margin-right 在竖排下变成“往右挤”，反而破坏对齐。
统一改用 gap 才可靠：
-
gap: 16px在flex-direction: row下是横向间距，在column下自动变成纵向间距 - 删掉所有子项上的
margin，尤其避免margin-bottom+gap叠加 - 如果竖排后文字和圆点贴太近，不是
gap不够，而是align-items: stretch拉高了所有子项高度，加align-items: flex-start对齐顶部
为什么 @media (max-width: 768px) 比 orientation 更常用？
因为真实用户场景里，“竖屏”不等于“小屏”——折叠屏手机展开后竖屏宽度可能超 800px，而老款平板横屏才 600px。只靠 orientation 会把大竖屏当成小屏处理，布局崩坏。
更稳妥的做法是：
- 默认按移动优先写竖排（
flex-direction: column） - 用
@media (min-width: 768px)切横排，断点选内容自然换行的位置，不是硬套设备型号 - 若真需区分方向，叠加写：
@media (orientation: landscape) and (max-width: 768px)处理小屏横屏特殊 case（比如手机横拍视频页）
竖屏下状态色对比度不够，算布局问题吗？
不算，但它是用户第一眼卡住的地方。媒体查询改了布局，但 color: #999 在白色背景+阳光直射下根本看不清 active 步骤。
必须同步检查：
- 所有状态色（
done、pending、active）在竖屏断点内是否满足 WCAG AA 对比度（至少 4.5:1） - 别只调
color，背景也得动——比如竖屏时.step.active改用深蓝底白字，而不是浅灰底黑字 - 伪元素生成的圆点（
::before）如果用了background: currentColor，要确认父级color在竖屏下本身已足够深
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
