How to Reset CSS after Media Query?

问题

I have some elements on my page that display and some that hide via a media query, and ultimately the nav disappears and is replaced by a responsive jQuery menu. This all works great, but when I resize the browser after, some of the elements that where once hidden are not not. This is what I have for the media query

@media only screen 
and (max-width: 1282px) 
{ 
#wrapMiddleNew { display:block; }
    }

I essintially want to hide it again on the same breakpoint sizing back up. This doesn't seem to work.

@media only screen 
and (min-width: 1282px) 
{ 
#wrapMiddleNew { display:none; }
}

回答1:

I just got trough your page and you have to add more query format.. this should do the trick

/* Normal Formating */
#wrapLeft, #wrapMiddle, #wrapRight {
     display:block;
}

#breakNav {
     display:none;
}
/* Media Query */
@media only screen and (max-width: 1282px) {
      #wrapLeft, #wrapRight {
          display:none;
      }
     #breakNav {
          display:block;
     }
}

@media only screen and (max-width: 900px) {
     #wrapLeft, #wrapRight, #breakNav {
     display:none;
}

}

So each time your window goes lower 1282px will apear if its bigger will hide....

回答2:

Do this:

 #wrapMiddleNew{
    display:none;
 }
 @media only screen  and (max-width: 1282px) 
 { 
      #wrapMiddleNew { display:block; }
 }

回答3:

You don't need the second query as the first bit of css only comes into effect while the screen is less than a certain number here is a demo:

http://jsfiddle.net/Hive7/WZXM6/

CSS:

@media all and (max-width: 500px) {
    .hi {
        display: none;
    }
}

Here is a media query tutorial:

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

You are targeting the wrong div your query should look like this:

@media only screen and (max-width: 1282px) { 
    #breakNav { 
        display: none;
    }
}

Then remove any jquery affecting that element

来源：https://stackoverflow.com/questions/22284002/how-to-reset-css-after-media-query

标签

css

media-queries