自适应网站Media Query失效求助：三列布局无法转为单列

云原生阿岚

2026-5-15

Fixing Your Broken Media Query for Responsive Layout

Hey there, let's troubleshoot why your media query stopped working—this is a super common gotcha, so don't stress!

First: Fix the CSS Syntax Error

Looking at your media query code, there's a tiny but critical mistake: you have an extra comma after .right in the selector list. Browsers will ignore the entire media query block when they hit this invalid syntax.

Your broken media query:

@media (max-width: 500px) { 
  .left, .middle, .right, { /* Extra comma here! */
    width: 100%; 
    height: auto; 
  } 
}

Fixed version:

@media (max-width: 500px) { 
  .left, .middle, .right {
    width: 100%; 
    height: auto;
    float: none; /* Don't forget this—removes the float so elements stack vertically */
  } 
}

I added float: none; here too—your default styles use float: left;, so overriding that is key to getting the elements to stack into a proper single column.

Second: Check for the Viewport Meta Tag

If you're testing on mobile devices (or mobile emulators), you need to include the viewport meta tag in your HTML <head>. Without it, mobile browsers will render your page at a desktop-sized width, so your media query won't trigger even when the screen is under 500px.

Add this to your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Quick Double-Check: CSS Load Order

Make sure your media query comes after your default column styles. CSS uses the cascade, so later styles override earlier ones—if your media query was placed before the float-based layout, it wouldn't work. From what you described, this might not be the issue since your code was working before, but it's worth a quick confirm.

Full Working Example

Here's a complete snippet to test out:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .left, .middle, .right { 
      float: left; 
      width: 170px; 
      margin: 10px;
      background: #eee; /* Just for visibility */
    }

    @media (max-width: 500px) { 
      .left, .middle, .right {
        width: 100%; 
        height: auto;
        float: none;
        margin: 10px 0; /* Adjust margin for cleaner single-column layout */
      } 
    }
  </style>
</head>
<body>
  <p class="left"> Content </p> 
  <p class="middle"> More content </p> 
  <p class="right"> Even more content </p>
</body>
</html>

That should get your responsive layout working again!

内容的提问来源于stack exchange，提问作者Niks Ļeoņenko

自适应网站Media Query失效求助：三列布局无法转为单列

First: Fix the CSS Syntax Error #

Second: Check for the Viewport Meta Tag #

Quick Double-Check: CSS Load Order #

Full Working Example #

First: Fix the CSS Syntax Error

Second: Check for the Viewport Meta Tag

Quick Double-Check: CSS Load Order

Full Working Example