viewport标签缺失或错误会导致@media失效，正确写法是；断点应依内容自然临界点设定，按min-width从小到大严格排序，推荐4个递进式断点。
viewport 标签缺失或写错，@media 就完全不生效
几乎所有“写了 @media 但手机上还是缩成一团”的问题，根源都在 <meta name="viewport">。它不是可选配置，而是媒体查询在移动端起效的硬性前提。
必须且唯一正确的写法是：<meta name="viewport" content="width=device-width, initial-scale=1.0">。其他写法全是坑：
-
width=375或width=1200：视口被硬编码锁定，@media (min-width: 768px)在 375px 设备上永远不触发 -
user-scalable=no或maximum-scale=1.0：禁用缩放，iOS Safari 下可能让字体渲染异常，还违反 WCAG 可访问性要求 - 被构建工具（如 Vite 插件）覆盖：最终 HTML 的
里根本没这行，或内容被篡改
验证方式很简单：Chrome DevTools 切 iPhone 模拟器后，检查 document.documentElement.clientWidth 是否接近设备逻辑像素（比如 iPhone 13 是 390）。如果不是，说明 viewport 没起作用。
@media (min-width: Npx) 的断点值不能抄模板，得盯内容“开始难看”的那一刻
所谓“768px 是 iPad 竖屏”，只是参考值。真实项目中，断点应由内容自然撑开/挤压的临界点决定，而不是设备型号。
立即学习“前端免费学习笔记（深入）”；
操作步骤很直接：
- 打开 Chrome DevTools 响应式模式，拖动宽度滑块，眼睛盯着卡片换行、文字断行、图片裁切、导航栏折叠的那一刻
- 记下那个像素值，比如
623px、892px，再向上取整为640px、900px这类易维护的整数 - 别为每个 iPhone 型号设断点（如
390px、430px），这些应由flex/grid+ 相对单位消化
常见错误是写 @media (width: 768px) —— 这个语法浏览器直接忽略，不报错也不生效；width 是精确匹配，只接受具体数值，不支持范围判断。
断点顺序必须严格按 min-width 从小到大排列，否则样式会意外覆盖
浏览器按 CSS 从上到下解析，同优先级规则后声明者覆盖前声明者。如果你把 @media (min-width: 1024px) 写在 @media (min-width: 768px) 前面，那么在 1024px 设备上，两个查询都会命中，但后者（768px）的规则会覆盖前者中未重新定义的属性。
✅ 正确顺序：@media (min-width: 480px) → @media (min-width: 768px) → @media (min-width: 1024px) → @media (min-width: 1200px)
❌ 错误顺序：反过来写，或中间跳过某个区间（比如从 768px 直接到 1200px，漏掉 1024px 区间）
混用 max-width 和 min-width 更危险。比如同时写 @media (max-width: 767px) 和 @media (min-width: 768px)，在 767.5px（如缩放 110% 的 iPad）下两者都不命中——这是最隐蔽的兼容性坑。
3–4 个全局断点足够，再多说明布局本身弹性不足
推荐用 4 个递进式 min-width 断点：480px（窄屏极限）、768px（内容开始舒展）、1024px（小桌面）、1200px（宽屏）。再多，往往不是适配更细，而是基础层没做好弹性处理。
每个断点内只写「该区间需要变更」的样式，不要重复定义基础层已设好的字体、颜色、margin 等。媒体查询本身只是条件开关，真正实现响应式的，是配合它写的 CSS 规则（比如 width: 100%、flex-wrap、grid-template-columns）——没这些，@media 就是空壳。
特别注意：断点值必须基于 width（即 viewport 宽度），别用 device-width。后者在横竖屏切换时值会跳变（比如 iOS Safari 横屏后 device-width 可能比竖屏还小），安卓部分旧浏览器还不支持。
