Applying media queries more efficiently

Question

I wrote a sample code to try media queries in css...
Here is the code:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: green;
}

@media only screen and (min-device-width: 374px) and (max-device-width: 376px) {
    body {
        background-color: blue;
    }
    #img {
        background-color: blue; 
    }
button {
        margin: auto;
    }
}
</style>
</head>
<body>

<p>Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.</p>
<button>Click me!</button>
<image src='Promo_2-2.jpg' id='img' alt='image'></image>
</body>
</html>

but media queries aren't working. Where am I wrong?

Ian Hazzard · Answer 1 · 2014-11-03T14:49:34.837

1

If you are viewing the queries on a computer, then there is nothing wrong with your queries. Remember this: min-device-width calculates the width of your device, while min-width calculates the window size. Your Media Query should look like this:

@media only screen and (min-width: 374px) and (max-width: 376px) {
    body {
        background-color: blue;
    }
    #img {
        background-color: blue; 
    }
button {
        margin: auto;
    }
}

And about the only keyword, here's what the Mozilla Developer Network says:

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Learn more about Media Queries here.

edited Nov 03 '14 at 14:49

answered Nov 03 '14 at 14:31

Ian Hazzard

7,661
7
34
60

Well... what is the difference between `@media only screen` and `@media screen`? – qwertymaster Nov 03 '14 at 14:34
1

That question has been answered before: http://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries Hope that helps! – Ian Hazzard Nov 03 '14 at 14:43

score 0 · Answer 2 · answered Nov 03 '14 at 14:33

Your code is wrong because the keyword 'only. The keyword ‘only’ can also be used to hide style sheets from older user agents'. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

You can check this information at w3.org: http://www.w3.org/TR/css3-mediaqueries/#media0 - example 9

Applying media queries more efficiently

2 Answers2

Learn more about Media Queries here.