横屏时flex容器不换向需用宽高比或宽度断点替代orientation查询，检查flex-direction是否被高优先级样式覆盖，确保flex-wrap未锁死换行，并同步调整子项宽度、字体、间距及触摸目标尺寸。
横屏时flex容器不换向？检查@media断点和flex-direction覆盖逻辑
很多同学写了@media (orientation: landscape)却没生效，根本原因是：设备方向媒体查询在桌面浏览器中不可靠，且部分安卓WebView会忽略它。真正稳定的做法是用宽高比或具体宽度断点。
实操建议：
- 优先用
@media (min-width: 768px) and (max-height: 400px)这类组合条件，比单纯orientation更可控 - 确保目标元素的
flex-direction没有被更高优先级样式（比如内联style或!important）锁死 - 横屏后若子项仍堆叠，检查父容器是否设置了
flex-wrap: nowrap——它会阻止换行，但不影响flex-direction本身
用flex-direction: row还是column？取决于内容流自然方向
横屏不是自动“变横排”，而是要重新评估信息优先级。比如竖屏下顶部导航+主内容是column合理，横屏后可能更适合row让导航固定左栏、内容占右侧大空间。
常见错误现象：
- 直接把所有
flex-direction: column改成row，结果表单控件被拉成超长一行，输入框变形 - 横屏后文字行宽暴增，可读性下降，却没配合
max-width或font-size调整
正确思路：横屏时flex-direction只是布局骨架，必须同步控制子项宽度、字体、间距。例如：
/* 横屏：侧边栏+主内容 */
@media (min-width: 1024px) and (max-height: 600px) {
.layout {
flex-direction: row;
}
.sidebar { width: 240px; }
.main { flex: 1; max-width: 800px; }
}
iOS Safari横屏触发延迟？加viewport最小高度兜底
iOS Safari在旋转瞬间不会立即触发orientation媒体查询，常导致横屏布局闪回或错位。这不是CSS问题，是渲染时机问题。
解决办法很务实：
- 在
<meta name="viewport">中加minimum-scale=1，避免双击缩放干扰尺寸判断 - 对关键容器设置
min-height: 100vh，防止横屏初帧因高度塌陷导致flex计算异常 - 不用
window.orientation做JS判断——它已被弃用，且在桌面模拟器里返回0造成误判
横屏后触摸目标变小？别只调flex-direction，顺手改padding和font-size
Flex方向变了，但按钮还是竖屏时的44px高，横屏后横向空间富余，纵向空间反而紧张，手指点不准就成常态。
容易被忽略的细节：
-
padding值不能全写死，横屏时建议用rem或em，或配合clamp()动态缩放 - 横屏下
font-size若不变，长文本行宽超35ch，阅读疲劳；可设font-size: clamp(1rem, 2.5vw, 1.25rem) - 如果用了
aspect-ratio控制卡片，横屏后需额外用max-width防溢出，否则flex容器撑破视口
事情说清了就结束：横屏布局不是换个flex-direction就完事，它是宽高比、交互密度、文本节奏的综合再平衡。漏掉任一环，用户转个屏就卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
