本文详解css媒体查询报错“expected curly brace”根本原因——媒体查询内必须包裹完整规则集（含选择器和花括号），不可直接书写样式声明。
在CSS中，媒体查询（@media）本身不是样式容器，而是一个条件包装器。它只能包裹完整的CSS规则集（ruleset），而每个规则集必须由选择器 + 花括号 {} + 声明块构成。你遇到的报错：
@media screen and (max-width: 960px) {
display: flex; /* ❌ 错误：无选择器，无法生效 */
justify-content: spacebetween; /* ❌ 拼写错误：应为 space-between */
height: 80px; /* ❌ 错误：孤立声明，无归属元素 */
}之所以提示“expected curly brace on line 2/3/4”，是因为CSS解析器在@media块内期望先看到一个选择器（如 .nav, header, #main），紧接着是 {，然后才是样式声明。当前代码跳过了选择器环节，直接写属性，这违反了CSS语法规范——所有样式声明必须隶属于某个选择器。
✅ 正确写法示例（为导航栏添加响应式布局）：
/* 先定义基础样式（可选） */
.navbar {
display: flex;
justify-content: space-between;
height: 80px;
background: #333;
}
/* 在媒体查询中，针对同一选择器重写样式 */
@media screen and (max-width: 960px) {
.navbar {
flex-direction: column; /* 移动端改为纵向排列 */
height: auto; /* 高度自适应 */
padding: 1rem;
}
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- justify-content: spacebetween 是无效值，正确写法是 space-between（带连字符）；
- 媒体查询内不能单独出现声明，也不能嵌套在另一个规则集内（例如不能把 @media 写在 .class { ... } 大括号里）；
- 若需批量修改多个元素，可使用逗号分隔多个选择器：
@media (max-width: 768px) { .header, .main, .footer { padding: 1rem; font-size: 0.9rem; } }
? 总结：CSS没有“全局样式作用域”。每一条 property: value; 都必须明确作用于某类元素——即通过选择器绑定。媒体查询只是为这些绑定增加“触发条件”，它本身不替代选择器。养成“先写选择器、再写 {}、最后填声明”的习惯，即可避免此类语法错误。
