先记住这个答案
orientation 只比较视口当前宽高：宽大于高是 landscape，否则是 portrait，与设备是否真的旋转不是同一个信号。若布局要求的是“放得下两栏”，应测可用宽度；若要求的是横向画面比例，方向条件才更贴切。分屏和软键盘都可能使视口形状变化，所以要按场景选条件。
orientation比较视口宽高- 横向视口不等于手机横置
- 空间需求通常用宽度断点
- 真实设备还需测试软键盘
播放器和商品卡片需要不同条件
视频播放器在横向视口想扩大画面，可以使用 (orientation: landscape)，因为目标确实与可用区域形状有关。但一个商品卡片的两列布局若只按横屏切换，小屏手机横过来也可能宽度不足，平板竖屏反而空间足够。此时直接用 min-width 或容器查询更贴近组件需求。真实设备上还要测试地址栏和软键盘造成的视口变化。
@media (orientation: landscape) {
.player { aspect-ratio: 16 / 9; }
}
@media (min-width: 48rem) {
.product { display: grid; grid-template-columns: 1fr 1fr; }
/* 两列布局按空间，而非设备握持方向切换 */
}查询判断的是视口的当前方向，横向通常表示宽度大于高度，纵向表示高度大于或等于宽度。
把桌面浏览器窗口拖成又高又窄，它也可能匹配 portrait；把手机横过来却保留分屏，它仍可能没有足够宽度排两列。这个反例说明 orientation 是布局视口的几何条件，不是手机传感器。需要控制实际横竖屏锁定或读取设备方向时，应另看相关平台 API，CSS 方向查询只适合样式选择。
方向查询看视口，不看握持姿态
它不报告陀螺仪状态，也不保证设备是手机或平板。CSS 媒体查询会随视口状态变化重新匹配；脚本若同步响应，应监听媒体查询变化而不是只在加载时读一次。区分“需要横向形状”与“需要足够宽度”这两类需求，可以避免横屏窄设备上的拥挤。
想让视频播放器在横向空间里更宽时，方向条件有合理依据；但横屏手机的浏览器工具栏仍可能吃掉高度，固定高度播放器也会遮住控制按钮。应结合实际可用宽高、最小尺寸和内容溢出测试。若只是希望两列商品卡不卡顿，方向条件就不如容器宽度，因为桌面窄侧栏也可能处在横向视口里。
容易答错的地方
- 把
landscape当成设备旋转事件 - 它查询视口宽高关系；分屏或浏览器窗口改变也可影响结果。
- 用方向代替所有尺寸断点
- 横屏手机不一定有足够宽度，竖屏平板也可能适合多列。
面试官还会怎么问？
电脑窗口也能匹配 portrait 吗？
可以。只要视口高度不小于宽度，就可能匹配，与设备类别无关。
软键盘会影响结果吗？
视口尺寸变化可能使匹配状态改变，具体还受浏览器的视口处理方式影响。
要监听真实设备旋转该用什么？
若确实需要设备方向数据，应看相应的屏幕方向 API；普通布局尽量按可用尺寸设计。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。