为什么我的媒体查询 styles 没有变化？

Question

I'm trying to test my media query code by adding a background color to the header in my tablet view. When I try and change it back to the desktop view it still stays red even though I didn't include red as a background colour in my desktop view media query.. Can anyone offer any advice?

/* For tablet: */

@media only screen and (min-width: 601px) {
  
    /* Header section  */
 
   header {
        margin: 40px auto;
       background-color: red;
      
    }
    
 
    
} /* Closing tablet query - DO NOT DELETE */



/* For desktop*/

@media only screen and (min-width: 992px) {

  .col-l-1 {width: 8.33%;}
  .col-l-2 {width: 16.66%;}
  .col-l-3 {width: 25%;}
  .col-l-4 {width: 33.33%;}
  .col-l-5 {width: 41.66%;}
  .col-l-6 {width: 50%;}
  .col-l-7 {width: 58.33%;}
  .col-l-8 {width: 66.66%;}
  .col-l-9 {width: 75%;}
  .col-l-10 {width: 83.33%;}
  .col-l-11 {width: 91.66%;}
  .col-l-12 {width: 100%;}
    
    
/* Header section  */

    header {
        width: 1100px;
        margin: 40px auto;
    }
    
    .logo {
        margin-left: 290px;
        margin-top: 80px;
    }
    
    nav {
         margin-top: 60px;
         margin-left: 240px;
            
    }  

} /*closing for desktop*/

Answer 1

So I think what's happening is both styles are being applied, and since the 992px doesn't specify a background-color it defaults to using red. Using max-width can eliminate that from happening. See below for a simple example:

 @media only screen and (max-width: 601px) { header { width: 1100px; margin: 40px auto; background-color: red; } } @media only screen and (max-width: 992px) { header { width: 1100px; margin: 40px auto; } }

 <header>Header</header> <nav>Nav</nav>

Answer 2

The problem you are having is due to the media query, which specifies min-width: 601px . For all screens 601 pixels or larger, the properties assigned to each selector will be true, so all header elements will have a background-color: red; , unless otherwise specified, in all screens with a width 601 pixels or larger.

To avoid seeing the red background color in your desktop sizes, you should either:

1 - Overwrite the property on the desktop media query:

@media only screen and (min-width: 992px) {
    header {
        width: 1100px;
        margin: 40px auto;
        background-color: transparent; /* or whatever you'd like */
    }
}

2 - Or limit your tablet media query to tablet sizes by adding a max-width condition:

@media only screen and (min-width: 601px) and (max-width: 992px) {
  ...
}

Answer 3

CSS works with the cascade style flow. The order of the rules will override the next rule if they are pointing the same css rule. If they doesn't the last rule will be maintained (it doesn't matter if the rules are in a media query). Resume: the media query doesn't override all the rules, only override the rules that you defined and it'll maintain the other rules as the last value in relation of the order in the css file.