移动端优先Media Queries失效：全屏幕尺寸均显示红色背景

嘿，我一眼就揪出问题所在啦！你遇到的「所有屏幕尺寸下body背景色都显示红色」的问题，大概率是没设置viewport元标签导致的，这是移动端优先布局里很容易踩的坑。

为什么会出现这个问题？ #

移动端优先的布局完全依赖正确的视口设置。如果你没在HTML的<head>里添加viewport标签，Chrome模拟器（以及真实移动设备）会默认把页面按照桌面端的宽度（通常是980px）来渲染——哪怕你选的是320px的手机模拟器，实际渲染宽度也会超过768px，直接触发min-width:768px的媒体查询，自然就一直显示红色背景了。

解决步骤 #

1. 添加viewport元标签
   在你的HTML文件的<head>部分插入这段代码：

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

这个标签会告诉浏览器：使用设备的实际宽度作为视口宽度，并且初始缩放比例为1，这样模拟器就能正确匹配你选择的屏幕尺寸了。

2. 优化CSS（可选，但更简洁）
   你的媒体查询顺序是符合移动端优先原则的（从小到大），可以把重复的margin:0抽出来作为公共样式，减少冗余：

body{ 
  margin: 0; /* 公共样式只声明一次 */
  background-color: black; 
}
@media (min-width:576px) { body{ background-color: green; } }
@media (min-width:768px) { body{ background-color: red; } }
@media (min-width:992px) { body{ background-color: pink; } }
@media (min-width:1200px) { body{ background-color: blue; } }

修复后的效果 #

添加viewport后，不同尺寸的显示就会正常生效：

• 屏幕宽度<576px：黑色背景
• 576px ≤ 宽度 <768px：绿色背景
• 768px ≤ 宽度 <992px：红色背景
• 992px ≤ 宽度 <1200px：粉色背景
• 宽度≥1200px：蓝色背景

内容的提问来源于stack exchange，提问作者Deke