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 根本不触发。
