移动端适配的标准写法是：**加一行 viewport meta，样式按「移动优先」用 min-width 媒体查询逐级增强，配套用 clamp()、百分比和 max-width:100% 做弹性布局**。断点选 576、768、992、1200 四档就够，不要按 iPhone 15、小米 14 这类具体机型单独写。
媒体查询的基本语法怎么写？
结论：媒体查询由「媒体类型 + and + 媒体特性」组成，日常只用 screen 和 min-width / max-width 两个特性就够。
/* 最常用：屏幕宽度 ≥768px 时生效 */
@media screen and (min-width: 768px) {
.container { width: 750px; }
}
/* 区间写法（Chrome 104+/Safari 16.4+ 支持） */
@media (400px <= width <= 700px) { ... }
screen 可省略，直接写 @media (min-width: 768px) 效果一样。除了写在 CSS 里，也可以在 <link> 上挂条件：<link rel="stylesheet" href="pc.css" media="(min-width: 992px)">，浏览器会在不匹配时不下载该文件，能省流量。媒体特性里最值得记的还有 hover、pointer、prefers-color-scheme，后面会用到。
移动端适配的断点应该定在哪几个值？
结论：断点按「布局开始变形」的位置定，通用项目直接用 576 / 768 / 992 / 1200 四档（对齐 Bootstrap 5 的 576 / 768 / 992 / 1200 / 1400），覆盖 320px～2560px 全部主流设备。
四档对应关系：576px 以下为大屏手机，576～767px 为手机横屏，768～991px 为平板竖屏，992～1199px 为平板横屏和小笔记本，1200px 以上为桌面。实测 320px（iPhone SE 一代）和 430px（iPhone 15 Pro Max）之间不需要任何断点，因为手机端靠弹性布局就不会溢出。
另外建议断点用 em 而不是 px：@media (min-width: 48em) 等价于 768px，但用户把浏览器默认字号从 16px 调大时，em 断点会跟着放大，可访问性更好。
移动优先和桌面优先有什么区别，选哪个？
结论：选移动优先（Mobile First），默认样式写手机端，用 min-width 逐级往上加，不要用 max-width 从上往下砍。
/* ✅ 移动优先：默认手机，逐级增强 */
.card { padding: 12px; }
@media (min-width: 768px) { .card { padding: 20px; } }
@media (min-width: 1200px) { .card { padding: 32px; } }
/* ❌ 桌面优先：手机上要先加载桌面样式再覆盖 */
.card { padding: 32px; }
@media (max-width: 1199px) { .card { padding: 20px; } }
@media (max-width: 767px) { .card { padding: 12px; } }
移动优先的好处有两个：一是手机端下载的 CSS 体积最小、渲染最快（移动流量和低端机 CPU 都更紧张）；二是规则只增不减，不会出现多条 max-width 互相覆盖、后写的赢、最后靠 !important 救场的局面。切记同一个断点不要 min-width 和 max-width 混用，这是样式错乱的头号原因。
除了媒体查询，还有哪些必须一起做的移动端适配？
结论：viewport meta、弹性单位、图片自适应三件套缺一不可，只写媒体查询页面照样会横向滚动。
- viewport meta 必须写在
<head> 最前面：<meta name="viewport" content="width=device-width, initial-scale=1">。少了这行，手机浏览器按 980px 虚拟宽度渲染，媒体查询的 min-width: 768px 会永远命中桌面样式。
- 图片和容器自适应：全局
img, video { max-width: 100%; height: auto; }，容器宽度用 % 或 max-width 而不是固定 px。
- 字号和间距用
clamp()：font-size: clamp(16px, 4vw, 20px) 表示最小 16px、随视口 4vw 放大、最大不超过 20px，一行顶三条媒体查询。
- 整屏高度用
dvh：移动端地址栏伸缩会导致 100vh 超出可视区，改用 height: 100dvh。
- 只给鼠标设备加 hover：
@media (hover: hover) and (pointer: fine) { .btn:hover { ... } }，避免触屏上 hover 状态卡住不消失。
- 暗色模式：
@media (prefers-color-scheme: dark) 里覆盖 CSS 变量即可。
- 1px 边框：高 DPR 屏上写
0.5px 或 transform: scaleY(0.5) 配伪元素，纯 1px 在 3 倍屏会显粗。
媒体查询最容易踩的坑有哪些？
结论：90% 的「媒体查询不生效」都出自下面四个原因，排查时按顺序看。
第一，漏写 viewport meta，媒体查询完全不生效；第二，CSS 里同时存在 min-width 和 max-width 且断点数值重叠，比如 max-width: 768px 和 min-width: 768px 会同时命中 768px 这一像素；第三，媒体查询块写在主样式之前，被后面的普通规则覆盖，记住同等特异性下后写的赢，媒体查询要放在文件末尾或对应模块之后；第四，靠 JS 判断 UA 或屏幕宽度来切换样式，UA 判断在 iPadOS 上会误判成 Mac，宽度判断会丢失窗口 resize 响应。如果只是「某个组件」要适配容器宽度而非视口，用容器查询 @container (min-width: 400px) 比媒体查询更准确，2023 年起 Chrome 105+、Safari 16+ 均已支持。
总结一下：viewport meta 打底，移动优先 + min-width 四档断点（576/768/992/1200）搭骨架，clamp() 和百分比做弹性，hover/dvh/暗色媒体特性补细节，避开 min-max 混用和顺序覆盖的坑，就是一套完整可维护的移动端适配方案。
