最推荐用 CSS @media screen and (orientation: ...) 区分横竖屏：竖屏隐藏侧边导航、设图片高度为80vh；横屏显示侧边栏、图片改用50vh并保持宽高比；需配合viewport设置及resize监听兜底。
直接用 CSS 的 @media screen and (orientation: ...) 规则就能区分横竖屏写不同样式，这是最轻量、最推荐的起点。
用 orientation 媒体查询写基础适配
浏览器原生支持 portrait（竖屏）和 landscape（横屏）两个方向值，无需 JS 即可生效：
- 竖屏下隐藏侧边导航，只留顶部菜单
- 横屏时把关键操作按钮横向并排，提升触控效率
- 图片容器在竖屏设为 100% 高度，在横屏改用固定宽高比（如 16/9）
示例代码：
@media screen and (orientation: portrait) {
.header { padding: 12px 16px; }
.nav-sidebar { display: none; }
.hero-img { height: 80vh; object-fit: cover; }
}
@media screen and (orientation: landscape) {
.header { padding: 8px 24px; }
.nav-sidebar { display: block; width: 220px; }
.hero-img { height: 50vh; width: auto; }
}
注意 orientation 的兼容性与 fallback 方案
部分安卓浏览器或 WebView 中 window.orientation 不可靠，orientation 媒体查询也可能延迟触发或不触发。稳妥做法是补充基于尺寸的判断：
- 当
screen.width > screen.height时，按横屏逻辑处理 - 监听
resize事件作为orientationchange的兜底（尤其在桌面模拟器或 Safari 某些版本中） - 避免仅依赖
orientation控制关键布局，比如整个页面结构切换，应结合 min-width/max-width 媒体查询双重保险
配合 viewport 设置确保方向检测准确
如果页面被缩放或视口宽度未正确设为设备宽度，orientation 判断可能失准。务必在 中声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 去掉
user-scalable=no或强制缩放限制，否则某些系统会禁用方向变更事件 - 避免设置固定
width=xxx，它会让 layout viewport 锁死，导致 orientation 查询失效 - 在 iOS 上，若页面有 iframe 或弹层，需确保其内部也继承了正确的 viewport 配置
复杂场景建议用 JS 主动干预布局
当横竖屏差异不只是样式微调，而是整套 DOM 结构、组件顺序甚至数据加载策略都不同（如游戏界面、视频控制栏），光靠 CSS 不够：
- 监听
orientationchange和resize双事件，用screen.width / screen.height实时判断方向 - 横屏时动态插入全屏播放器容器，竖屏时还原为嵌入式布局
- 用
document.documentElement.classList.toggle切换is-landscape类，让 CSS 和 JS 共享状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
