max-height与max-width媒体查询失效问题求助

Hey there! Let's work through your media query issues and clear up the SCSS placement confusion.

First: Why Your Media Queries Aren't Working in BrowserSync #

Let's break down the most likely culprits:

• Your test viewport doesn't match the media query conditions
  The query you wrote targets screens where both max-height: 267px AND max-width: 667px are true—that's an extremely small landscape view (think a tiny phone held sideways, or a very narrow, short desktop window). Double-check you're actually testing a viewport that meets both criteria:

  1. Open your browser's dev tools (F12)
  2. Use the device toolbar (Ctrl+Shift+M) to manually set the viewport to 667px wide × 267px tall
  3. Refresh and see if the styles kick in

• SCSS isn't compiling correctly
  BrowserSync only serves compiled CSS, so if your style.scss has syntax errors or your build tool (Gulp, Webpack, etc.) isn't set up to auto-compile SCSS on changes, your media query rules won't make it into the live CSS.

  • Check your build tool's console for compilation errors
  • Verify that when you edit style.scss, the corresponding style.css file updates with your media query code

• Bootstrap's styles are overriding yours
  Bootstrap uses specific selectors that might have higher specificity than your rules. To check this:

  1. In dev tools, inspect the element you're targeting (e.g., .name-tag-image)
  2. Look in the Styles panel—if your media query rules are crossed out, they're being overridden
  • Fix this by increasing your selector specificity (e.g., use body #header .name-tag-image instead of just #header .name-tag-image) instead of reaching for !important unless absolutely necessary

• Syntax errors in your SCSS
  Double-check the nesting in your media query—while your code looks mostly correct, a missing brace or misplaced selector could break compilation. For example, ensure all nested selectors inside #header are properly closed within the media query block.

Second: Does Media Query Placement Matter in SCSS? #

Short answer: No, not technically—you can place media queries anywhere in your SCSS file, including the middle, as long as the syntax is correct. That said, there are two common patterns developers use for organization:

1. Nested media queries (right next to the base styles)
   This keeps responsive styles tied to their default counterparts, making it easier to maintain:

   #header {
     .name-tag-image {
       width: 600px; // Default desktop style
       padding-right: 30px;
   
       @media all and (max-height: 267px) and (max-width: 667px) {
         width: 400px;
         padding-right: 20px;
         // Other landscape-specific styles
       }
     }
   }
   

2. Centralized media queries (at the end of the file)
   If you prefer grouping all responsive rules together, you can move all media queries to the bottom of your SCSS. This works great if you want to see all breakpoints in one place.

The key thing to watch out for is style order: any styles (including media queries) that come later in the compiled CSS will override earlier ones if they have the same specificity. So if you have a conflicting rule after your media query, it could cancel out your landscape styles.

Quick Debugging Checklist #

1. Confirm your test viewport matches max-height:267px AND max-width:667px
2. Check that your SCSS compiles to CSS without errors
3. Use dev tools to verify your media query rules are present and not overridden
4. Ensure no syntax errors are breaking your SCSS block

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