横竖屏与分屏是同一套宽度规则的不同取值
别名: orientation media · split-screen · 横竖屏 · 分屏宽度
概念解释
布局真正吃进去的输入是当前可用宽度（以及与之配套的高度、安全区），不是「这是不是横屏」或「这是不是分屏」。手机横过来、平板把窗口一分为二、桌面把浏览器拖窄，只是把宽度这条变量换成另一个数字。同一套以宽度为条件的规则在这些取值上应给出同一结果：720 CSS 像素就是 720，不论它来自横屏还是分屏。把 orientation: landscape 写成另一套设计，等于把同一宽度轴劈成互不相通的两支。
它处理的是规则的自变量该是什么，不是断点的数值从哪量，也不是切换时对象身份保不保。
机制
媒体查询里的 orientation 比较的是视口宽与高谁更大，不描述内容有多少空间。一台竖屏平板的可用宽，可能大于一台横屏手机；分屏后的半个桌面窗口，可能窄过手机竖屏。若横屏走一套双列、竖屏走一套单列，分屏窗口既不是「横」也不是「竖」的产品意图，会落到错误的那一支，或两支都漏。宽度规则没有这个盲区：输入是同一个长度，输出是同一套排列。
高度仍会变——横屏更矮、分屏有时更扁——那是另一条轴，用来处理「垂直方向放不下」的折叠，而不是用来复制一整套横向布局。安全区、刘海、系统手势条改变的是可点击边缘，同样不应触发与宽度无关的整页换肤。把设备类型（指针粗细、悬停能力）与宽度绑在 orientation 上，会在外接键盘的横屏平板上误判。
边界
相机、地图、视频播放器有真实的方向语义：传感器朝向决定画面该旋转，不能折叠成「宽度变了」。全屏沉浸里锁定方向是平台能力，不属于响应式宽度规则。打印、固定画布、AR 平面不提供这条视口宽度。aspect-ratio 在极宽极扁的条带上仍有用（工具条变高还是变矮），但它补的是高度轴，不是再搞一套横屏品牌。折叠屏的铰链、双屏的第二块表面是额外的显示区域，不能假装成同一个视口宽度的另一种取值——那是多表面，不是分屏把一块切窄。
怎么落地
- 用
min-width/max-width（或容器宽度）驱动列数、导航形态和栅格；不要用orientation: landscape | portrait切换主布局。 - 把横屏、分屏、拖拽窗口当成同一套规则的取样点，而不是三条产品线。高度不足时单独折叠次要块，不要连同横向结构一起换掉。
- 指针类型、悬停、安全区用它们自己的查询，不要绑进方向。
- 验证：在同一像素宽度下比较「真横屏」与「竖屏里的分屏 / 缩窗口」，主结构应一致。再找一个「竖屏平板宽 > 横屏手机宽」的配对，确认没有按方向走错列数。