媒体查询必须包裹在选择器定义内才能生效，直接在`@media`块中写css属性会导致语法错误，本文详解原因、修复方法及常见误区。
在CSS中，@media规则本身只是一个条件容器，它不会自动作用于任何元素——它必须配合一个或多个CSS规则集（ruleset） 才能生效。你遇到的报错（如“expected curly brace”、“invalid CSS”），根本原因在于：你把样式声明（如 display: flex;）直接写在了 @media 块内部，而没有用选择器和花括号将其包裹起来。
❌ 错误写法（无选择器，语法非法）：
@media screen and (max-width: 960px) {
display: flex; /* ❌ 报错：无所属选择器 */
justify-content: space-between; /* ❌ 注意：正确写法是 space-between，不是 spacebetween */
height: 80px; /* ❌ 同样无效 */
}✅ 正确写法（必须指定目标元素，并用 {} 包裹样式）：
/* 假设你想为导航栏 .navbar 在小屏下启用弹性布局 */
@media screen and (max-width: 960px) {
.navbar {
display: flex;
justify-content: space-between;
height: 80px;
}
}? 关键要点总结：
立即学习“前端免费学习笔记（深入）”；
✅ @media 是容器规则，不能直接包含样式声明；
✅ 所有CSS样式必须属于某个选择器 + 花括号规则集（例如 .header { ... } 或 nav { ... }）；
✅ 该规则集可以位于 @media 内部（响应式）、外部（常规样式），或嵌套在其他规则中（如现代CSS预处理器支持，但原生CSS不支持嵌套）；
⚠️ 拼写注意：justify-content: space-between 中的连字符不可省略，spacebetween 是无效值，浏览器会忽略；
-
? 小技巧：可将通用样式与响应式样式分离，提升可维护性：
/* 基础样式 */ .header { height: 100px; } /* 小屏适配 */ @media screen and (max-width: 960px) { .header { height: 80px; display: flex; justify-content: space-between; align-items: center; } }
掌握这一基本结构，就能避免90%的媒体查询语法错误。记住口诀：“有@media，必有选择器；有样式，必有花括号” —— 这是CSS语法的铁律，也是你迈向稳健响应式开发的第一步。
