17370845950

css媒体查询中样式规则必须嵌套在选择器规则集中，不能直接写在@media块内

你在使用 @media screen and (max-width: 960px) 时遇到的报错（如“expected curly brace”），根本原因在于：CSS不允许在媒体查询内部直接书写样式声明。你当前的代码：

@media screen and (max-width: 960px) {
  display: flex;
  justify-content: spacebetween;
  height: 80px;
}

这段代码语法非法——@media 是一个条件容器，它本身不选择任何元素，因此不能直接包含样式属性。所有 CSS 样式（如 display、justify-content）必须隶属于某个选择器规则集（selector + { ... }）。

✅ 正确写法是：先指定要修改的元素（例如 .header、nav 或 body），再将该规则集放入媒体查询中：

/* ✅ 正确：为 .navbar 在小屏下启用 Flex 布局 */
@media screen and (max-width: 960px) {
  .navbar {
    display: flex;
    justify-content: space-between; /* 注意：正确拼写是 'space-between'，不是 'spacebetween' */
    height: 80px;
  }
}

⚠️ 同时注意两个常见细节错误：

立即学习“前端免费学习笔记（深入）”；

• justify-content: spacebetween → 应为 justify-content: space-between（带连字符）；
• display: flex 等属性对无选择器的裸规则无效，CSS 解析器会在第 2 行就因缺少左花括号 { 报错——因为它期待的是 selector { ... }，而非孤立的声明。

? 小结：

• @media 只负责「何时生效」，不负责「作用于谁」；
• 「作用于谁」由选择器（如 .menu、#hero、main）定义；
• 所有样式声明必须包裹在 selector { ... } 内，无论是否在媒体查询中；
• 初学者常误将媒体查询当作“全局样式开关”，实则它是“带条件的选择器包装器”。

掌握这一结构逻辑，就能避免 90% 的媒体查询语法错误。