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

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.

Answer 2

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 3

To see how different media queries react on resize or orientation change, try the demo on this page:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

You can adjust the media query attributes to get a feel for how they affect a page.

Answer 4

Here are a few projects that solve this issue and are at the forefront of dynamic css and screen sizes:

• 320 and up:

  ‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

• Lessframework:

  Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.