Media queries doesn't work

Question

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/

Solution

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)

Comments

[disinfor]

This question did not become moot. You can still resize your browser without using Dev tools. Nor does this question ask about dev tools. The original question was because of max-device-width vs. max-width. FF Dev has had the device dropdown for a couple versions now.