VS Code中媒体查询失效通常源于CSS语法错误，尤其是@media规则中and关键字前后缺少空格，导致浏览器无法解析，本文详解正确写法及调试要点。

vs code中媒体查询失效通常源于css语法错误，尤其是`@media`规则中`and`关键字前后缺少空格，导致浏览器无法解析，本文详解正确写法及调试要点。

在CSS响应式开发中，@media查询是实现设备适配的核心机制，但一个看似微小的语法疏忽——and关键字前后缺失空格——就会导致整个媒体查询完全失效。你提供的代码：

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

问题在于：@media后缺少空格、and前后紧贴括号（即 )and(），这违反了CSS规范。根据W3C媒体查询语法标准，and 是一个逻辑运算符，必须作为独立的标识符与前后括号用空格分隔。

✅ 正确写法如下：

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

关键修正点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• @media 后加空格；
• (min-width: 300px) 与 and 之间有空格；
• and 与 (max-width: 400px) 之间也有空格；
• 属性值中建议添加空格（如 300px → 300px 可接受，但 300 px 错误；推荐统一写为 300px）。

? 调试提示：

• 不要依赖VS Code实时预览判断媒体查询是否生效——VS Code本身不运行CSS渲染，需在浏览器中打开HTML文件（如通过Live Server插件）；
• 打开浏览器开发者工具（F12），切换到「Responsive Design Mode」，手动调整视口宽度至300–400px区间，观察样式是否应用；
• 检查控制台是否有CSS语法错误警告（如“Invalid CSS property”或“Unexpected token”）；
• 确保该CSS已正确引入HTML（ 或

⚠️ 注意事项：

• and 区分大小写，必须小写（AND 或 And 均无效）；
• 多条件组合时，每对括号与 and/not/only 之间均需空格，例如：

  @media (min-width: 768px) and (orientation: landscape) and (prefers-reduced-motion: reduce) { ... }

• 若需支持更小屏幕（如手机竖屏），建议补充移动优先基础样式，并用 min-width 逐步增强，而非仅依赖窄区间断点。

掌握这一空格规范，不仅能解决当前问题，更是写出健壮、可维护响应式CSS的基础前提。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！