响应式CSS仅1000px断点生效问题求助

• 必须添加viewport元标签
  移动设备和Device Toolbar依赖这个标签识别设备宽度，直接在HTML的<head>里插入：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  没有这个标签的话，浏览器会默认用桌面端的基准宽度（比如980px）缩放页面，即使你把窗口拉小到700px，浏览器实际识别的宽度还是远大于700px，小断点自然不会触发。

• 检查媒体查询的顺序与优先级
  如果你用的是桌面优先（先写桌面样式，再用max-width断点），必须保证断点按从大到小的顺序写，比如：

  /* 桌面默认样式 */
  .container { width: 1200px; }
  
  /* 1000px断点 */
  @media screen and (max-width: 1000px) {
    .container { width: 900px; }
  }
  
  /* 700px断点 */
  @media screen and (max-width: 700px) {
    .container { width: 600px; }
  }
  

  要是把700px的断点写在1000px前面，1000px的样式会覆盖它——因为CSS遵循“后定义优先”的规则。另外别乱用!important，这会直接打乱优先级，导致小断点的样式被覆盖。

• 强制刷新清除缓存
  浏览器经常会缓存旧的CSS文件，导致你改的断点代码没生效。按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新，清空缓存后再测试。

• 检查Device Toolbar的设置
  打开Chrome的Device Toolbar后，点击右上角的三个点，确认没开启不必要的设备框架，或者手动修改过设备分辨率。也可以直接在顶部宽度输入框里输入700、470这些数值，手动触发断点，看样式是否变化。

• 用极端样式测试断点是否触发
  把小断点的样式改成一眼就能看到的效果，比如：

  @media screen and (max-width: 700px) {
    body { background: red !important; }
  }
  

  如果拉到700px宽度背景没变红，说明媒体查询本身有语法错误——检查有没有拼写错max-width，括号、大括号有没有闭合，或者漏写了and关键字。

内容的提问来源于stack exchange，提问作者Vinícius Soares Andrade