VS Code中Media Query无法正常工作问题求助

你的Media Query代码存在语法错误，这是导致不生效的核心原因，同时还有几个常见排查点，按以下步骤修复：

1. 修正Media Query语法 #

原代码中and前后没有空格，且括号与属性值间缺少空格，不符合CSS规范，修改为：

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

2. 确保HTML头部添加viewport元标签 #

响应式布局必须依赖viewport标签告诉浏览器如何适配设备宽度，在HTML的<head>里添加：

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

3. 排查样式优先级与引入问题 #

• 检查你的CSS文件是否正确通过<link>标签引入到HTML中，路径是否正确
• 确认没有其他优先级更高的CSS规则（比如行内样式、ID选择器）覆盖了div的背景色设置

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