咨询：媒体查询在移动设备上无法生效的问题

我仔细看了你的代码和描述，发现几个可能导致媒体查询失效的关键点，咱们一步步来排查修复：

1. 先修正CSS里的重复属性问题 #

你的.item选择器里重复定义了width属性：

.item { 
  width: 50px; 
  height: 50px; 
  background-color: yellow; 
  width: 100%; /* 这个会直接覆盖前面的50px */
  margin: 8px; 
}

虽然这不是媒体查询失效的直接原因，但会导致布局不符合预期，建议只保留一个符合你需求的width值。

2. 确保Viewport标签完整有效 #

你提到已经添加了viewport标签，但描述里的内容是截断的（initial...），这很可能是问题核心！正确的viewport标签必须完整，才能让移动设备正确识别视口宽度：

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

如果标签内容不完整，移动设备会用默认的桌面视口宽度渲染，媒体查询自然不会触发。

3. 确认媒体查询的代码顺序 #

你的代码里媒体查询写在基础样式之后，这是正确的——因为CSS遵循“后定义覆盖前定义”的规则，如果媒体查询写在基础样式前面，它的样式会被后面的基础样式覆盖，导致失效。

修复后的完整代码示例 #

HTML #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- 完整的viewport标签 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询测试</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
  </div>
</body>
</html>

CSS #

.item { 
  width: 100%; 
  height: 50px; 
  background-color: yellow; 
  margin: 8px; 
  box-sizing: border-box; /* 可选：避免margin撑开元素宽度超出容器 */
} 

@media screen and (max-width: 720px) { 
  .item { 
    background-color: green; 
    /* 这里可以添加更多移动端专属样式，比如调整间距、宽度等 */
  } 
}

额外测试小技巧 #

• 按下F12打开浏览器开发者工具，切换到移动设备模拟模式，手动调整视口宽度到720px以下，查看元素的background-color是否变成绿色
• 清除浏览器缓存，确保最新的CSS文件被加载

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