CSS媒体查询不能依赖物理尺寸（如英寸、厘米），因其不被浏览器支持，所有适配均基于视口宽度和用户代理特征；可靠断点应使用min-width与max-width组合覆盖典型平板区间，如@media (min-width: 768px) and (max-width: 1023px)，并以内容坍塌点而非设备型号为依据设定。
不能靠物理尺寸做CSS分发——浏览器根本拿不到设备的英寸或厘米值，所有“平板适配”实际都是基于视口宽度（viewport width）和用户代理特征间接推断的。
为什么不能用物理尺寸写媒体查询
CSS媒体查询不支持 device-width（已废弃）、in 或 cm 单位作为断点依据；现代浏览器只暴露逻辑像素（CSS像素），且受缩放、DPR、UA设置影响。比如 iPad Air 10.9 英寸和 Galaxy Tab S9+ 12.4 英寸在竖屏时都报告 768px 宽度，横屏则都接近 1024px —— 物理尺寸差异完全不可见。
- 所有所谓“7英寸平板”“10英寸平板”的分类，本质是设计团队对常见视口宽度区间的经验归纳
-
@media (width: 7.2in)这类写法在任何主流浏览器中都不生效 - 试图用
resolution或device-pixel-ratio辅助判断，会引入更多不可控变量（如 Safari 对 DPR 的报告不一致）
真正可用的平板断点组合：min-width + max-width
必须用视口宽度区间覆盖典型平板使用场景，而不是单点阈值：
-
@media (min-width: 768px) and (max-width: 1023px)：覆盖 iPad 第9代竖屏（768×1024）、多数安卓平板竖屏、部分小屏笔记本（如 Surface Go） -
@media (min-width: 1024px)：作为桌面起点，同时兼容 iPad 横屏（1024×768）、大屏安卓平板横屏（如 1280×800） - 避免只用
@media (max-width: 768px)，否则 iPad 横屏（1024px）会降级到手机样式 - 慎用
@media (min-width: 768px) and (orientation: portrait)—— 很多用户旋转设备时触发重绘，但布局来不及响应
Flex/Grid 在平板断点里容易崩的三个具体表现
不是语法错，而是容器与子项约束在 768–1024px 区间内失配：
立即学习“前端免费学习笔记（深入）”；
-
flex: 1在 768px 宽度下强制拉伸，导致文字被压缩、按钮变形；改用flex: 0 1 auto+min-width: 280px -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))在 768px 下生成两列，每列仅 ~330px，图文错位；可改为minmax(350px, 1fr)或加@media覆盖 - 未设
max-width: 100%的图片或卡片，在 1024px 横屏下溢出父容器；所有媒体元素必须带height: auto
字体与间距突变的修复方式
直接在 768px 断点把 font-size 从 14px 跳到 18px 是最常见错误——iPad 竖屏下内容立刻撑满，行高断裂。
- 统一用
rem，根字号从html { font-size: 16px }改为16.5px或17px，让所有文字/间距自然放大 3%–6% - 避免在断点内重写每个
font-size，只调html的font-size，其余靠继承和比例缩放 -
padding/margin同步按相同比例缩放，否则元素会“飘”或“挤”
真正的难点不在写多少断点，而在于确认设计稿里哪一列卡片在 820px 宽度下开始换行、导航栏在哪一像素值坍缩成汉堡菜单——这些才是你该测的临界点，不是查“iPad 尺寸表”。
