Bootstrap 的 col-md-* 不等于“平板横屏”，因其 md 断点（≥768px）同时涵盖竖屏与横屏平板，需用 @media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) 组合判断，并配合自定义 CSS 微调布局。
不能直接用 Bootstrap 自带的断点类（如 col-md-*）精准捕获“平板横屏”这一状态，因为 Bootstrap 的 md 断点（≥768px）同时覆盖了平板竖屏和横屏，而横屏本身没有独立的媒体查询钩子——得自己补。
为什么 col-md-* 不等于“平板横屏”
Bootstrap 的 md 断点起始值是 768px，这恰好是 iPad 竖屏最小宽度。一旦用户把 iPad 横过来（1024px 宽），它仍落在 md 范围内，但布局需求可能已变：比如竖屏时两列紧凑排布，横屏时想撑开成三列或加间距。此时仅靠 col-md-4 无法区分方向，必须叠加方向判断。
-
col-md-*响应的是“视口宽度 ≥768px”，不是“设备是平板且横屏” - iPad Pro（12.9"）竖屏是 834px，横屏是 1210px —— 两者都属于
md甚至lg，但视觉密度差异大 - Android 平板碎片化严重，仅靠宽度阈值无法稳定识别横屏意图
用 @media 手动限定“横屏平板”的典型范围
最稳妥的方式是组合两个条件：视口宽度在常见平板横屏区间 + orientation: landscape。注意：不要只用 orientation，因为桌面浏览器缩放也会触发，必须加宽度约束。
- 推荐写法：
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) { ... } - 这个范围能覆盖主流平板横屏（iPad 9.7"/10.2"/11"、Surface Go、多数 Android 8–11" 平板）
- 避免用
device-width：它不可靠，且现代浏览器已逐步弃用 - 若需更精确，可针对特定设备加
aspect-ratio（如aspect-ratio: 16/10），但兼容性略低（Chrome 101+ / Firefox 110+）
在横屏平板下微调栅格列宽和间距
直接修改 col-md-* 的行为不现实（类名已编译），正确做法是在自定义 CSS 中覆盖 flex 属性或 max-width，并利用 Bootstrap 的 gutter 工具类辅助。
立即学习“前端免费学习笔记（深入）”；
- 例如让原本
col-md-6在横屏平板下变成等宽三列：@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) { .my-landscape-row .col-md-6 { flex: 0 0 calc(33.333% - 1rem); max-width: calc(33.333% - 1rem); } } - 慎用
!important：优先通过更具体的选择器（如加.landscape-only类到row）提升权重 - gutter 调整建议用
gx-* / gy-*工具类，而非重写margin，避免破坏响应链 - 测试时务必在真机 Safari / Chrome 上旋转验证，模拟器常忽略
orientation变化
容易被忽略的兼容性坑
横屏媒体查询在 iOS Safari 上有个经典陷阱：地址栏收起/展开会动态改变视口高度，但 orientation 不触发重计算；而安卓 Chrome 对 orientation 的判定延迟明显。这意味着你写的样式可能“卡住”不动。
- 解决方案：不依赖
orientation单独判断，始终搭配min-width/max-width使用 - iOS 15+ 之后，
viewport元标签里的height=device-height已废弃，别再用 - 如果项目需支持旧版 IE（虽已极少见），
orientation完全无效，只能退回到纯宽度断点 - 真正关键的不是“识别横屏”，而是“识别用户此刻是否需要更宽松的布局”——有时用
prefers-reduced-motion或hover能间接提示交互意图
