优先用@media内联规则而非多个link，因其按条件解析样式、避免预加载、保障CSSOM完整性；断点应基于内容坍塌临界点设为768px、1024px、1200px等，统一用px/em/rem单位，并强制配置viewport meta。
直接用 @media 规则写断点，配合 min-width 逐级增强样式，是最稳定、最可控的方式。用 link 标签按条件加载不同 CSS 文件看似灵活，但会增加请求、延迟渲染、破坏样式层叠逻辑，不推荐作为主方案。
为什么优先用 @media 内联规则而不是多个 link
浏览器对 link[media] 的处理是“先下载再判断”，即使媒体查询不匹配，文件仍可能被预加载甚至解析（尤其在 Chrome 中）。而 @media 块内的样式只在条件满足时才计算和应用，性能更可控。另外，多个外部 CSS 文件会导致：CSSOM 构建分散、关键样式无法内联、调试时难以追踪样式来源。只有当某套样式体积极大（如整页打印专用规则）且确定永不复用时，才考虑拆出独立 link 并配 media="print"。
min-width 断点怎么设才不容易翻车
别抄 iPhone 宽度（375px、414px），这些是设备物理视口，实际应看内容何时“撑不开”或“挤太紧”。典型临界点来自布局反馈：
-
min-width: 768px：多数平板竖屏最小宽度，也是 flex/grid 开始换行的常见拐点 -
min-width: 1024px：窄笔记本常用宽度，适合启用三栏或侧边导航 -
min-width: 1200px：宽屏内容区上限，再宽就该加 max-width 限制容器了
所有断点必须用 px、em 或 rem，不能用 vw 或 % —— 媒体查询的条件值必须是静态可计算的长度单位。
立即学习“前端免费学习笔记（深入）”；
viewport meta 标签漏掉，@media 就等于没写
这是最常被忽略的硬性前提。没有它，iOS Safari 和部分 Android 浏览器会以约 980px 的虚拟视口渲染页面，导致 max-width: 768px 永远不触发。必须在 <head> 里加上：
<meta name="viewport" content="width=device-width, initial-scale=1">
注意两点：
-
width=device-width不是固定像素，而是映射到当前设备的 CSS 像素宽度 - 别加
user-scalable=no或maximum-scale=1，这会破坏可访问性，且某些安卓 WebView 会因此禁用 pinch-zoom
背景图、字体、间距这些细节怎么平滑切换
纯靠媒体查询做“突变式”切换（比如小屏用 14px，大屏跳到 20px）会让体验生硬。真正适配要结合相对单位：
- 背景图切换用
@media (min-width: 768px)换background-image，但同时用background-size: cover保比例 - 字体大小优先用
clamp(16px, 4vw, 24px)，让字号随视口连续变化，媒体查询只作兜底（如超小屏强制font-size: 14px） - 间距类属性（
padding、margin）避免写死px，可用rem配合根字体缩放，或直接用vw控制响应比例
断点不是越多越好，2–3 个足够覆盖主流场景；多了反而让维护成本陡增，也容易因覆盖顺序错乱导致样式意外失效。
