Can someone please explain CSS media queries?

Question

I read the article about them over at css3.info, but I didn't feel like it explained it well enough. I also could not get their examples to change with my screen size. I attempted in Safari, FF, Chrome.

Is this a feature that is not ready for implimentation yet?

If I want to adjust some styles when the browser window is less than 1024px wide. How can I do that?

Answer 1

To apply a style sheet to a document when displayed on a screen greater than 800 pixels wide:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" >

To apply a style sheet to a document when displayed on any device less than 400 pixels wide:

<link rel="stylesheet" media="all and (max-device-width: 400px)" >

inside

@media all and (max-width:800px) {
    body { color: red; }
}

for iphone

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

::combining media query

Answer 2

The rule applied to the screen size means that, citing W3C spec "is usable on screen and handheld devices if the width of the viewport is" in the specified constraints.

http://www.w3.org/TR/css3-mediaqueries/

If you want to adjust the style when the viewport is less than 1024px you can use this rule:

@media screen and (max-width: 1024px) { … }

anyway this rule applies only to the viewport actual size. If you resize the viewport without reloading the page the styles won't be applied.