平板横屏适配需避免硬编码断点与突变式媒体查询，应采用 min-width 渐进增强、clamp() 配合 rem 动态根字号、grid/auto-fit 弹性布局及 viewport 正确配置。
平板横屏适配的关键不是加一个 @media (min-width: 1024px) 就完事，而是让布局在 1024–1200px 区间内不“卡住”、不“突变”、不因缩放或系统 UA 适配而失效。
为什么 @media (max-width: 768px) 会让平板横屏完全失守
这个写法把所有宽度 > 768px 的设备都排除在外——包括 iPad Pro 横屏（1024px）、Surface Pro（1366px）、甚至部分折叠屏展开态（~1100px）。结果是这些设备直接套用桌面默认样式，字体小、边距崩、Flex 项换行错乱。
更隐蔽的问题是：某些 Android 平板系统（如 Samsung One UI）在横屏时会报告 window.innerWidth 为 1024px，但实际 CSS 视口宽度因缩放被映射为 912px，max-width: 768px 根本不匹配，样式彻底丢失。
正确做法只用 min-width 渐进增强：
- 基础样式（手机竖屏）不包任何
@media -
@media (min-width: 768px)→ 覆盖 iPad 竖屏、大安卓平板 -
@media (min-width: 1024px)→ 专用于横屏场景，比如让侧边栏显形、主内容设max-width: 1200px、表单字段并排 - 断点值取自真实布局拐点，比如拖动 Chrome DevTools 到 1032px 时导航栏图标开始挤压，那就用
1040px，而非硬套 1024
clamp() 在横屏下必须配合 rem，否则只是假响应
clamp(14px, 2.5vw, 16px) 单独写在 :root 里，对横屏效果有限：1024px 下算出来约 16px，再大就封顶，失去弹性；而 1200px 宽度的 Surface Pro 横屏，字体仍卡在 16px，和桌面无异。
真正起效的写法是让根字号持续生长，同时控制上限节奏：
html {
font-size: clamp(14px, 1.2vw + 0.8rem, 18px);
}
这样在 1024px 时约为 16.4px，1200px 时约 17.2px，1440px 时刚好到 18px 封顶。所有 font-size、padding、margin 必须用 rem，例如 padding: 1.25rem —— 若混用 12px 或 0.75em，缩放时边距会脱离字体节奏，视觉密度瞬间失衡。
Flex/Grid 布局在横屏下要防“撑满即崩”
用 flex: 1 做三列，在横屏下常因 padding/border 导致总宽超 100%，最后一项掉行；用 grid-template-columns: repeat(3, 1fr) 又可能让卡片过窄（尤其带图片的卡片）。
稳妥方案是组合弹性与最小约束：
- 卡片容器设
display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))—— 保证每列不窄于 320px，横屏自动填满 3–4 列 - 避免
width: 33.33%，改用flex: 0 0 calc(33.33% - 1rem)预留 gap 空间（但优先用gap: 1rem） - 表单横排时，
.form-row { display: flex; gap: 1rem; }比float或inline-block更稳，且 Safari 15.4+ 已全面支持gapfor flex
横屏下最容易被忽略的三个细节
一是 <meta name="viewport"> 必须在 最顶部，且不能含 maximum-scale=1.0 —— 否则 iOS 横屏双击缩放失效，用户无法看清细文字；
二是图片必须设 max-width: 100%; height: auto;，否则横屏时高分辨率图会横向溢出，触发强制滚动条；
三是不要依赖 window.orientation 判断横竖屏（已废弃），改用 window.matchMedia("(orientation: landscape)")，它在横屏折叠设备（如 Z Fold 展开）中依然准确返回 true。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
