vs code中媒体查询未生效，通常是因为@media规则中and关键字前后缺少必要空格，导致css解析失败；修正语法后即可正常触发响应式样式。

vs code中媒体查询未生效，通常是因为@media规则中and关键字前后缺少必要空格，导致css解析失败；修正语法后即可正常触发响应式样式。

在编写CSS媒体查询时，语法规范至关重要。你提供的代码：

@media(min-width:300px)and(max-width:400px){
    div{
        background-color: pink;
    }
}

看似合理，实则违反了CSS媒体查询的标准语法规则：and 是一个逻辑操作符，必须与前后括号保持至少一个空格分隔。缺少空格会导致浏览器（或VS Code内置预览工具）将其视为无效媒体条件，从而完全忽略该规则。

✅ 正确写法如下（注意空格位置）：

@media (min-width: 300px) and (max-width: 400px) {
  div {
    background-color: pink;
  }
}

关键修正点：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• @media 后紧跟一个空格；
• (min-width: 300px) 左右括号外侧无空格，但内部冒号后建议加空格（提升可读性，非强制）；
• and 前后必须各有一个空格（即 ) and (）；
• max-width 同理，保持结构对称。

⚠️ 注意事项：

• VS Code本身不执行CSS，它只是编辑器；真正决定媒体查询是否生效的是浏览器。请确保将HTML文件在Chrome/Firefox等浏览器中打开（而非仅用VS Code内置Preview插件——部分插件不支持完整媒体查询解析）；
• 检查HTML中是否正确引入了该CSS文件（如 ）；
• 确保目标
  元素存在且未被更高级别的CSS规则覆盖（可借助浏览器开发者工具 → Elements 面板 → Styles 标签页验证样式是否被应用或被划掉）；
• 建议在中添加视口元标签，否则移动设备可能忽略媒体查询：

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

? 小技巧：在VS Code中安装 Auto Rename Tag 和 CSS Peek 插件，可辅助语法检查与快速跳转；开启“CSS Lint”类扩展（如 Stylelint）还能实时提示and缺失空格等常见语法错误。

遵循规范的媒体查询语法，是构建可靠响应式布局的第一步——空格虽小，却决定样式能否生效。