Media queries doesn't work

问题

Does anyone know why my media queries code doesn't work ?

 <div class="box"></div> 

 .box {
     background-color: red;
     width: 100%;
     height: 50px;
 } 

 @media only screen and (max-device-width: 768px)  {
     .box {border: 5px solid blue;}
 }

http://jsfiddle.net/N9mYU/

回答1:

You would use (max-width: 768px) instead of (max-device-width: 768px). See the difference between max-device-width/max-width explained here.

Add a viewport if you want the media query to work on mobile devices:

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

UPDATED EXAMPLE HERE

@media only screen and (max-width: 768px) {
    .box {
        border: 5px solid blue;
    }
}

Further reading: A pixel is not a pixel/Viewport width and screen width (mdn)

回答2:

Sorry folks but this question just became moot: Firefox Dev edition just did an upgrade and changed how the device screens are presented: you can no longer select screen size by pixel using a drop down box; you now have to select the device name which will have its dimensions displayed.

I've long had problems when Firefox has issued an update while I have the browser open.

The regular Firefox browser with firebug is now more responsive. Some of issues I have been dealing with is that when I set a limit such as "min-width 320px" FDE only performs the change at a larger min, say 380px. This does not change in the updated edition.

来源：https://stackoverflow.com/questions/21441993/media-queries-doesnt-work