本文详解css媒体查询报错的根本原因——未在@media内部定义选择器和规则集，导致“缺少花括号”等误导性提示，并提供正确写法、典型错误对比及调试建议。
本文详解css媒体查询报错的根本原因——未在@media内部定义选择器和规则集，导致“缺少花括号”等误导性提示，并提供正确写法、典型错误对比及调试建议。
在CSS中，所有样式声明（如 display: flex;、justify-content: space-between;）都必须位于一个有效的规则集（ruleset）内，而规则集由三部分构成：选择器 + 左花括号 { + 声明块 + 右花括号 }。媒体查询（@media）本身只是一个条件容器，它不替代选择器，也不能直接包裹CSS属性——你不能把样式规则“裸写”在 @media 大括号内部。
例如，以下代码是错误的，正是提问者遇到的问题：
/* ❌ 错误：@media 内部缺少选择器，规则孤立存在 */
@media screen and (max-width: 960px) {
display: flex; /* 报错：'display' 无归属选择器 */
justify-content: space-between; /* 注意：此处应为 'space-between'，非 'spacebetween' */
height: 80px;
}浏览器会报类似 Unexpected token 或 Missing '{' 的错误（尤其在第2行起），并非真缺花括号，而是CSS解析器在遇到 display: 时发现前方没有合法选择器，从而判定整个规则集结构非法——这是初学者极易误解的关键点。
✅ 正确写法必须显式指定目标元素的选择器，例如：
立即学习“前端免费学习笔记（深入）”；
/* ✅ 正确：为 .header 添加响应式样式 */
@media screen and (max-width: 960px) {
.header {
display: flex;
justify-content: space-between;
height: 80px;
}
}
/* ✅ 也可同时作用于多个选择器 */
@media screen and (max-width: 960px) {
nav,
.main-content,
.footer {
padding: 1rem;
font-size: 0.9em;
}
}⚠️ 需特别注意的细节：
- justify-content: space-between 是标准值，拼写为 space-between（含连字符），spacebetween 无效；
- 媒体查询可嵌套在常规规则集中（如使用 Sass），但原生 CSS 中 @media 必须独立，且其内部只能包含完整规则集，不可包含其他 at-rules（如 @keyframes）或单独声明；
- 若需对同一组件设置多断点样式，应复用选择器，而非重复写 @media 块（保持可维护性）。
? 调试建议：
当遇到“unexpected token”或“missing {”类错误时，优先检查该行上方最近的 { 是否属于某个选择器；若 @media 后直接跟属性，则立即补全选择器——这是90%同类报错的根源。
掌握这一基础语法规则，不仅能解决当前问题，更能避免后续在伪类、动画、自定义属性等场景中出现类似结构性错误。CSS 的健壮性，始于清晰的规则集边界。
