横屏内容显示不全主因是未适配盒模型行为，而非媒体查询失效；需改用相对单位、解除固定宽限制、启用grid/flex-wrap、移除overflow-x:hidden并确保viewport正确。
横屏内容显示不全，大概率是用了 @media (orientation: landscape) 但没处理好容器宽度或布局方向，而不是媒体查询本身失效。
为什么 @media (orientation: landscape) 常常“不起作用”
这个媒体查询只检测设备物理朝向，不改变元素盒模型行为。常见问题包括：
- 父容器仍用
width: 100vw，横屏时100vw变大，但内容被固定宽的祖先截断 - Flex 容器默认
flex-direction: row，横屏后子项横向堆满，但没设flex-wrap: wrap或min-width，导致溢出 - 写了
@media (orientation: landscape) { .card { width: 300px; } }，但竖屏下该卡片本身已设max-width: 100%，横屏反而卡死宽度 - 使用了
position: fixed或transform的元素，在横屏时脱离文档流，不再响应视口变化
真正要改的是容器和子项的尺寸约束逻辑
横屏不是“换个样式”，而是切换布局语义。重点不是加新规则，而是解除旧限制：
- 把所有写死的
width: 320px、max-width: 480px换成相对单位：width: 90%或max-width: calc(100vw - 48px) - 对列表类容器，横屏下优先启用
display: grid并设grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，比 flex 更可控 - 避免在横屏规则里重设
height，除非明确需要（比如视频播放器），否则留白比强制裁剪更安全 - 如果用了
overflow-x: hidden在 body 或 wrapper 上，横屏时必须移除——它会直接吞掉超出部分，连滚动条都不给
别忽略 viewport meta 和字体缩放干扰
很多“显示不全”其实是浏览器主动缩放导致的视觉错觉：
立即学习“前端免费学习笔记（深入）”；
- 检查
<meta name="viewport" content="width=device-width, initial-scale=1.0">是否缺失或被覆盖 - 某些 Android WebView 在横屏时会强制缩小页面以适配，加
user-scalable=no能缓解但牺牲可访问性，慎用 - 字体用了
vw单位（如font-size: 4vw）？横屏时字体会猛涨，撑爆容器——改用clamp(1rem, 2.5vw, 1.25rem)更稳 - 真机调试时，Chrome DevTools 的 “Device Toolbar” 默认开启 “Fit to screen”，会伪造缩放效果，关掉再测
横屏适配最难的点不在 CSS 规则怎么写，而在于你是否清楚当前内容在横屏下的合理信息密度——是该拉宽展示更多列，还是该放大关键元素提升可触面积？这两者策略相反，不能靠一个 @media 块同时满足。
