本文详解 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; 都必须明确作用于某类元素——即通过选择器绑定。媒体查询只是为这些绑定增加“触发条件”，它本身不替代选择器。养成“先写选择器、再写 {}、最后填声明”的习惯，即可避免此类语法错误。
