本文详解css媒体查询报错“expected curly brace”等语法错误的根本原因——媒体查询内部必须包裹在有效选择器及其规则集中，不能直接写样式声明。
本文详解css媒体查询报错“expected curly brace”等语法错误的根本原因——媒体查询内部必须包裹在有效选择器及其规则集中，不能直接写样式声明。
在CSS中，@media 是一种条件规则（at-rule），用于根据设备特性（如视口宽度）动态应用样式。但它本身不接受直接的样式声明；所有CSS属性（如 display、justify-content、height）必须隶属于一个规则集（ruleset），即由选择器 + 花括号 {} 包裹的声明块。
你遇到的代码：
@media screen and (max-width: 960px) {
display: flex;
justify-content: spacebetween;
height: 80px;
}之所以持续报错（例如 “Expected ‘{’” 或 “Invalid property name”），根本原因在于：
✅ @media 块内缺少选择器；
❌ display、justify-content 等声明孤立存在，未归属任何元素。
CSS语法强制要求：每条样式声明必须属于某个选择器的规则集。媒体查询只是“开关”，不是“容器”。它只决定何时启用其内部的规则集，但不能替代选择器。
✅ 正确写法：为样式添加明确选择器
假设你想让导航栏（.navbar）在小屏下变为弹性布局，应这样书写：
立即学习“前端免费学习笔记（深入）”；
/* ✅ 正确：媒体查询内包含完整规则集 */
@media screen and (max-width: 960px) {
.navbar {
display: flex;
justify-content: space-between; /* 注意拼写：space-between，非 spacebetween */
height: 80px;
}
}? 小贴士：justify-content: spacebetween 是常见拼写错误，正确值为 space-between（带连字符）。
❌ 常见误写及问题分析
| 错误示例 | 问题说明 |
|---|---|
| @media (max-width: 768px) { color: red; } | 缺少选择器 → 浏览器无法知道“谁”该变红，语法非法 |
| nav { @media (hover: hover) { background: #eee; } } | 媒体查询不可嵌套在规则集内部（CSS原生不支持，需借助预处理器如Sass） |
⚠️ 注意事项与最佳实践
-
选择器不可省略：即使想全局重置，也需使用通配符或根元素，例如：
@media (max-width: 480px) { body { margin: 0; padding: 0; } * { box-sizing: border-box; } } - 语法检查建议：使用 VS Code 配合 Autoprefixer 和 CSS Peek 插件，实时高亮语法问题。
- 浏览器兼容性提醒：@media screen 中的 screen 可省略（@media (max-width: 960px) 已默认针对屏幕设备），更简洁且语义清晰。
✅ 总结
CSS媒体查询不是“样式容器”，而是“样式开关”。它的作用是有条件地启用一组已定义好的规则集。只要牢记这一核心原则——「媒体查询内必须有选择器 + {} 规则集」——就能彻底规避 Expected '{'、Invalid property 等典型语法报错。初学者可将媒体查询类比为 JavaScript 中的 if 语句：if (condition) { /* 必须有执行体 */ }，空的 if (true) {} 合法，但 if (true) color = 'red';（无花括号包裹）则语法错误——CSS 同理。
