HTML移动端适配如何结合媒体查询适配不同屏幕尺寸的移动设备

移动端适配关键在于以宽度为主、方向为辅的媒体查询逻辑，配合viewport设置、弹性单位和图片自适应，避免height陷阱与device-width废弃属性，确保在真实设备上稳定响应。

移动端适配的关键不是堆砌断点，而是用宽度为主、方向为辅的媒体查询逻辑，配合合理的单位和布局方式，让页面在真实设备上稳定响应。

只用 width 做主断点，避开 height 陷阱

移动端视口高度会随地址栏收起/展开动态变化，比如 Safari 滚动时 innerHeight 突然变大，导致 @media (max-height: 667px) 失效或误触发。而宽度（max-width）稳定可靠，且与设计稿切图逻辑一致（如 375px、414px、750px）。

1. 优先使用 @media screen and (max-width: 375px)、(min-width: 376px) and (max-width: 414px) 这类组合断点
2. 避免写 @media (max-width: 768px) 通吃所有“手机”，它会把 iPad mini 也卷进来，造成按钮过小、文字拥挤
3. 不用 max-device-width，它查的是设备物理像素，已废弃；应基于视口逻辑宽度

搭配 rem 时，媒体查询要直接调 html font-size

如果用 rem 做单位，媒体查询的作用不是改布局，而是校准根字号基准。否则不同断点下 rem 计算失真，字体和间距会错位。

1. 在每个断点里明确设置 html { font-size: 16px; } 或对应值（如 375px 屏设为 100px，414px 屏设为 110px）
2. 别把媒体查询写成独立样式块，防止被后续规则覆盖；建议把所有 html { font-size } 集中写在 CSS 开头
3. 断点值推荐取常见机型逻辑宽度：iPhone SE（320px）、iPhone 8（375px）、iPhone 13 Pro（414px）、iPad（768px+）

横竖屏必须显式区分，不能靠宽度猜

仅靠宽度断点无法处理 iPad 横屏、折叠屏展开等场景，容易出现文字堆叠、表单被键盘顶飞等问题。

1. 对关键布局加 orientation 判断：@media (min-width: 768px) and (orientation: landscape)
2. 弹窗、登录页这类高度敏感组件，可单独用 @media (max-height: 600px) 调整 padding 和 font-size
3. 横屏时 flex-direction、grid-template-columns 等属性往往需要重设，不能依赖 width 断点自动覆盖

基础结构不能少：viewport + 弹性单位 + 图片自适应

媒体查询是“开关”，但前提是页面本身具备弹性能力。

1. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 是起点，缺了它 media query 失效
2. 容器宽度用 width: 90%; max-width: 1200px;，字体用 rem 或 clamp(1rem, 2.5vw, 1.25rem)，避免固定 px
3. 图片统一加 img { max-width: 100%; height: auto; display: block; }，防止溢出