css媒体查询必须包裹在选择器定义的规则集中，不能直接在@media块内写样式声明；否则会因缺少花括号包裹的选择器上下文而报错。
你遇到的错误源于一个常见的CSS语法误解：@media 规则本身只是条件容器，它不直接接受样式声明——所有CSS属性（如 display, justify-content, height）必须写在某个具体选择器的规则集（selector + { ... }）内部。
你当前的代码：
@media screen and (max-width: 960px) {
display: flex;
justify-content: spacebetween;
height: 80px;
}❌ 是非法的，因为：
- @media 块内缺少选择器（例如 .header, nav, #main）；
- display 等声明没有归属目标，CSS引擎无法知道“对谁应用这些样式”；
- justify-content: spacebetween 拼写错误（应为 space-between），但这属于次要问题，主因仍是语法结构缺失。
✅ 正确写法示例：
立即学习“前端免费学习笔记（深入）”；
/* 假设你想为导航栏在小屏下启用弹性布局 */
.navbar {
/* 默认样式（可选） */
}
@media screen and (max-width: 960px) {
.navbar {
display: flex;
justify-content: space-between; /* ✅ 修正拼写 */
height: 80px;
}
}? 关键要点总结：
- @media 后必须跟一个或多个完整规则集（即 选择器 { 属性: 值; }）；
- 不允许在 @media 内直接写孤立的属性声明；
- 可在一个 @media 块中定义多个选择器，例如：
@media screen and (max-width: 960px) { .sidebar { display: none; } .content { width: 100%; } header { padding: 1rem; } } - 务必检查属性名拼写（如 space-between 而非 spacebetween）、单位（80px 合法，但 height 对 flex 容器影响有限，通常需配合 align-items 或子元素设置）及浏览器兼容性。
初学时容易混淆“哪里能写样式”，记住这个口诀：有选择器，才有声明；有@media，必须套规则集。 理解了这一层结构，媒体查询就不再神秘。
