90%移动端媒体查询失效源于viewport标签缺失或错误：必须唯一、置于head最顶部，且content值严格为"width=device-width, initial-scale=1.0"，缺一不可，否则视口按980px渲染导致断点永不匹配。
viewport meta 标签没写对，@media 就根本不会触发
90% 的移动端媒体查询失效，是因为 <meta name="viewport"> 缺失或参数错误。它必须唯一、且放在 <head> 最前面。常见错误包括：
-
width=device-width缺失 → 手机按 980px 渲染，max-width: 768px永远不匹配 -
initial-scale=1.0缺失 → 页面被缩放，1px 对应物理像素数漂移，断点错位 - 误加
user-scalable=no→ iOS Safari 16+ 已禁用该行为，反而导致表单无法放大查看
正确写法只有一行：<meta name="viewport" content="width=device-width, initial-scale=1.0">。别加多余参数，也别拼错 content 值。
别用 max-width 写断点，优先选 min-width
用 @media (max-width: 767px) 容易在 768px 边界上和 @media (min-width: 768px) 同时生效，CSS 层叠顺序决定谁胜出，结果不可控。主流框架（Bootstrap、Tailwind）全用 min-width，不是为了“移动优先”理念，而是因为它天然支持“默认样式 + 增量增强”。
推荐断点值（按内容定，不是按设备型号硬套）：
立即学习“前端免费学习笔记（深入）”；
-
576px：小屏手机横竖屏都覆盖得住 -
768px：平板竖屏起始点，抽屉菜单/侧边栏常用分界 -
992px：宽屏平板或窄桌面，适合改列数或加间距 -
1200px：标准桌面，可启用多栏、大图、复杂导航
注意：iPhone 12/13/14 竖屏视口是 390px，但你一般不用为它单独写断点——576px 已包含它；真要精细控制，应结合 pointer: coarse 或 any-hover: none 判断是否为触屏主设备。
@media 只控制样式是否生效，不控制 CSS 是否下载
很多人以为写了 @media (max-width: 767px) { .nav { display: none } } 就等于“只在手机加载这套样式”，其实整个 CSS 文件仍会被完整下载。真正按需加载得靠 HTML 的 <link media>：
- 浏览器只在匹配时才发起请求，不匹配就完全不下载——省流量、减首屏阻塞
- 确保互斥：
<link href="mobile.css" media="(max-width: 767px)">和<link href="desktop.css" media="(min-width: 768px)"> -
href路径写错不会报错，Network 面板里直接看不到请求，静默失败 - IE9 及以下无视
media属性，如需兼容，必须 fallback 到 JS 动态插入 +link.sheet.cssRules轮询判断加载完成
除了宽度，还要响应用户真实偏好
现代响应式不只是适配屏幕尺寸。这些媒体特性已在 Safari 14+、Chrome 87+、Firefox 97+ 稳定支持，但常被忽略：
-
@media (prefers-color-scheme: dark)：切换整套配色，比 JS 检测更早生效、更轻量 -
@media (prefers-reduced-motion: reduce)：用于transition和animation，避免触发眩晕症用户不适 -
@media (hover: hover)和@media (pointer: fine)：区分鼠标悬停与触屏点击，优化交互反馈
断点数值不是从设计稿里抄来的固定值，而是由你项目中实际支持的设备视口范围决定的；@media 是开关，<link media> 才是闸门——前者管“用不用”，后者管“下不下载”。最常被跳过的一步，是忘了检查 document.documentElement.clientWidth 在真机上的实际值，而不是依赖模拟器或 Chrome DevTools 的设备预设。
