应配对使用@media (orientation: portrait)和landscape，仅用于响应旋转场景；优先用min-width断点切布局，再叠加orientation微调；flex用gap替代margin，加align-items: flex-start防错位；同步适配颜色对比度与点击热区。
直接用 @media (orientation: portrait) 和 @media (orientation: landscape) 即可，但必须配对使用，且不能单独依赖它做布局决策。
orientation 媒体查询只在移动端可靠
这个特性检测的是设备物理方向，不是视口宽度。它在 iOS Safari、Android Chrome 上基本准确，但在部分旧版 WebView 或折叠屏展开态下可能返回错误值（比如竖屏却报 landscape）。所以别把它当唯一判断依据。
- 只在明确需要“响应旋转”时用，比如横屏弹出视频控件、竖屏隐藏侧边栏
- 不要和
min-width混写在同一规则里——旋转时宽度不变，min-width不会触发 - 真要兼容折叠屏或大屏手机，优先用
@media (min-width: 768px)切布局，再叠加and (orientation: landscape)微调
flex-direction 切换是核心，但 gap 替代 margin 才不翻车
很多人写了 flex-direction: column 和 row 切换，结果横屏后子项间距错乱。问题出在 margin 是固定方向的：竖屏写 margin-bottom: 12px，横屏时它就变成“往右挤”，破坏水平对齐。
- 所有子项删掉
margin，改用父容器的gap: 12px -
gap在flex-direction: row下是横向间距，在column下自动转为纵向间距 - 如果子项高度不一致导致竖排错位，加
align-items: flex-start防止stretch拉高
字体、颜色、交互元素必须同步适配
只改布局不调样式，用户第一眼就会卡住。比如竖屏下 color: #999 在阳光直射屏幕时根本看不清，横屏时按钮太小按不准。
- 竖屏断点内检查所有状态色是否满足 WCAG AA 对比度（至少 4.5:1）
- 横屏时按钮最小点击区域建议 ≥ 44px × 44px，可用
min-height+padding保证 - 避免用
vh做字体单位——Safari 横屏时100vh会包含地址栏高度，造成内容截断
真正难的不是写两组媒体查询，而是确保 orientation 切换时，gap、align-items、颜色对比度、点击热区这些细节全跟上。漏掉任意一项，用户旋转手机那一刻，体验就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
