CSS报错：@media (min-width: 564px)及下一行出错，新手求解决方案

Hey there! I’ve been in your shoes before—staring at a CSS error message that makes zero sense at first glance. Let’s walk through the most common reasons that error pops up for @media (min-width: 564px) and how to fix them:

• Unclosed syntax before the media query
  More often than not, the error isn’t actually in the media query itself—it’s from a rule right above it that’s missing a semicolon or closing brace. For example:

  .header {
    background: #fff
  } /* Missing semicolon after #fff */
  @media (min-width: 564px) {
    /* Your styles here */
  }
  

  The parser gets confused by the incomplete rule and blames the next line (your media query) for the error. Double-check all CSS blocks right before your @media rule to make sure every declaration ends with a ; and every opening { has a matching closing }.

• Invalid characters in the media query
  Small typos or wrong character types can break things:

  • Accidentally using full-angle parentheses (@media（min-width: 564px） instead of @media (min-width: 564px)—note the difference between （） and ()).
  • Misspelling min-width (like minwdith or min width with a space instead of a hyphen).
  • Adding unnecessary quotes around min-width (e.g., @media ("min-width": 564px)—media features don’t need quotes).

• Broken syntax in the first line inside the media query
  The error message points to the media query and its next line, so take a look at the first style rule inside your @media block. If that line has a mistake (like a missing colon, wrong property name, or unclosed value), the parser might flag the media query itself instead. For example:

  @media (min-width: 564px) {
    .content width: 80%; /* Missing colon after .content */
  }
  

Quick Troubleshooting Tip #

Pop your CSS into your code editor’s built-in validator (most modern editors like VS Code do this automatically) or use the browser’s DevTools: right-click on your page, select "Inspect", go to the "Styles" tab, and look for red underlines that show exactly where the syntax breaks.

内容的提问来源于stack exchange，提问作者fuse