viewport标签缺失或写错会导致@media失效，因iOS Safari默认以980px渲染页面，使max-width断点无法匹配；必须使用width=device-width且置于head顶部，避免硬编码、禁用缩放，并通过clientWidth验证实际视口宽度。
viewport 标签写错，@media 就全失效
没加或写错 <meta name="viewport" content="width=device-width, initial-scale=1.0">，@media 规则在手机上基本不触发——iOS Safari 默认视口是 980px，你写了 @media (max-width: 480px) 也根本进不去。
常见错误包括：
-
width=375或width=1200：硬编码让视口固定，失去响应能力 -
user-scalable=no或maximum-scale=1.0：禁用缩放，违反可访问性，且部分 iOS 版本会引发字体渲染异常 - 构建工具（如 Vite 插件）覆盖了原始
<meta>，需检查最终 HTML 的<head>源码
验证方式：Chrome DevTools 切 iPhone 模拟器后，看 <html> 的 clientWidth 是否接近设备逻辑像素（如 iPhone 13 是 390）。
断点不是抄设备尺寸，而是找内容“撑不开”的像素点
设计稿里两列卡片在 783px 开始重叠，但你设了 @media (min-width: 768px)，那中间 15px 就会错位。真实断点必须靠眼睛找：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools 响应式模式，拖动宽度滑块，观察文字换行、图片裁切、卡片错位发生的精确像素值
- 记下那个“自然断裂点”，比如
623px、892px，再向上取整为640px、900px等易维护值 - 别为每个 iPhone 型号加断点（如
390px、430px），这些应由flex/grid+ 相对单位消化
3–4 个全局断点足够：480px（窄屏极限）、768px（内容开始舒展）、1024px（小桌面）、1200px（宽屏）。再多说明布局本身不够弹性。
统一用 min-width，别混用 max-width 和 min-width
@media (max-width: 767px) 和 @media (min-width: 768px) 并列看似无缝，实则在 767.5px（比如缩放 110% 的 iPad）下两者都不命中，留白或错位——这是最隐蔽的兼容性坑。
移动优先写法更可靠：
- 基础样式（小屏）直接写在
@media外 - 大屏只用
@media (min-width: 768px)逐级增强 -
min-width逻辑线性，调试清晰；max-width容易嵌套混乱、覆盖难查
避免用 em 单位设断点（如 48em），多数构建工具不支持变量在 @media 中展开，CSS 原生也不解析自定义属性。
@media 只是开关，真正起作用的是它里面的 CSS 规则
媒体查询本身不“让元素响应式”，它只是条件开关；真正让元素响应式的，是配合它写的 CSS 规则——比如 width: 100%、flex-wrap、grid-template-columns。没这些，@media 就是空壳。
常见错误包括：
- 把
@media (max-width: 768px) { }当成字符串写进 JS 变量里，比如const mq = "@media"—— 完全无效 - 在 HTML 标签上加
media=""属性，如<div media="(max-width:768px)">—— 这不是标准属性，浏览器忽略 - 只靠
<link rel="stylesheet" href="a.css" media="screen">控制样式表加载，却指望它能做细粒度样式切换 —— 它只决定整张 CSS 是否引入，不参与具体规则匹配
用 width，别用 device-width：width 对应逻辑视口宽度，稳定可预期；device-width 是设备物理像素除以 devicePixelRatio 的结果，横竖屏切换时值会跳变，安卓旧浏览器还不支持。
