vs code中媒体查询未生效，通常是因为@media规则内and关键字前后缺少必要空格，正确写法需在and两侧各保留一个空格，否则浏览器无法解析该断点条件。

vs code中媒体查询未生效，通常是因为@media规则内and关键字前后缺少必要空格，正确写法需在and两侧各保留一个空格，否则浏览器无法解析该断点条件。

在编写响应式 CSS 时，媒体查询（Media Query）是核心机制之一，但其语法容错性极低——哪怕一个空格的缺失，也会导致整个规则被浏览器忽略。你提供的代码：

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

看似结构完整，实则违反了 CSS 规范：@media 后需紧跟空格；and 是逻辑连接符，必须独立成词，即其前后均需有空格。否则，min-width:300px)and(max-width:400px 会被解析为非法的媒体特性表达式，浏览器直接丢弃该规则。

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

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

? 关键修正点：

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

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

下载

• @media 后加空格；
• (min-width:300px) → 建议写作 (min-width: 300px)（冒号后、单位前加空格，提升可读性与兼容性）；
• and 前后必须各有一个空格；
• max-width 同理规范书写。

⚠️ 注意事项：

• VS Code 本身不执行 CSS，它只是编辑器；“不生效”实际是浏览器未应用样式，根源在于语法错误导致 CSS 解析失败；
• 可通过浏览器开发者工具（F12 → Elements → Styles 面板）查看该媒体查询是否被标记为“invalid”或完全未列出，快速定位问题；
• 推荐启用 VS Code 的 CSS 验证插件（如内置 CSS Language Features），它会在语法错误处实时提示波浪线警告；
• 实际测试时，请确保视口宽度严格处于 300px–400px 范围内（可使用设备模拟器或手动缩放并检查 根元素宽度）。

总结：媒体查询不是“写对了就能用”，而是“写得完全符合规范才能用”。空格虽小，却是 CSS 解析器判断语义的关键分隔符。养成规范书写习惯，能避免大量隐性调试时间。

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