Media Queries 需配合 viewport meta 标签生效，按视口宽度（非物理分辨率）匹配条件，推荐移动端优先、min-width 断点，结合 clamp() 等实现弹性布局。
Media Queries 的基本写法和触发条件
响应式设计的核心是 @media 规则，它不是“自动适配”，而是按你定义的条件（比如视口宽度）匹配后才应用样式。浏览器只在满足条件时解析并生效其中的 CSS，不匹配就跳过。
-
@media screen and (max-width: 768px)中的screen是可选媒体类型，现代项目通常省略；max-width指视口宽度 ≤ 768px 时生效（注意：是 viewport 宽度，不是设备物理分辨率） - 必须用
px、em或rem等绝对/相对单位，不能用百分比或vh/vw做断点值（它们本身是动态单位，不能用于媒体查询条件） - 移动端 Safari 和旧版 Android 浏览器对
orientation支持不稳定，慎用(orientation: landscape)做核心布局判断
移动端优先还是桌面端优先？怎么选断点
主流做法是移动端优先（mobile-first），即先写小屏样式，再用 min-width 逐步增强。这不是教条，而是因为小屏约束更强、逻辑更清晰——大屏样式往往只是“加点东西”，而小屏要“删减+重构”。
- 不要按 iPhone/Android 具体型号设断点，比如
375px、414px；应基于内容溢出、行高挤压、按钮太小等实际问题出现的位置反推断点 - 典型断点建议：
768px（平板竖屏临界）、1024px（常见笔记本窄屏）、1200px（宽屏内容区上限），全部用min-width向上扩展 - 避免断点碎片化：4 个以上断点会让维护成本陡增，多数项目 2–3 个足够
常见错误：viewport meta 标签漏掉或写错
@media 生效的前提是页面正确声明了视口。没有它，移动端浏览器会以 980px 左右的虚拟宽度渲染，导致 max-width: 768px 根本不触发。
- 必须在
中加入： -
width=device-width不是固定值，而是映射到设备的 CSS 像素宽度；initial-scale=1防止 iOS Safari 自动缩放 - 如果用了
user-scalable=no或maximum-scale=1，会影响可访问性，WCAG 不推荐
配合 rem/vw 实现真正弹性布局
仅靠 Media Queries 切换整套样式不够灵活，尤其字体、间距这类细节。需要结合相对单位才能平滑过渡。
立即学习“前端免费学习笔记（深入）”；
- 用
vw做响应式字号（如font-size: 4vw）时，注意最小值限制，否则小屏文字过小：可搭配clamp(16px, 4vw, 24px) - 用
rem+ JS 动态改根元素font-size也能实现类似效果，但增加了运行时依赖；纯 CSS 的clamp()更轻量且兼容性已覆盖 Chrome 88+/Safari 13.1+ - 慎用
em嵌套：它继承父元素字号，多层嵌套后容易失控；rem始终相对于根元素，更可控
@media 重计算，得监听 window.resize 手动补救。 
