Menu

Subscribe

Introduction in CSS3 Media Queries

#CSS3 media query #HTML

Hi Gents.

CSS2 allows to specify style table for specific media type, display or print view. But now CSS3 does it more effectively. And all it is about media queries. You can add media type expressions to check specific conditions and apply different styles. For example, you can have one style for large displays and specific styles for mobile devices. It is very powerful, because it allows to adopt to different device resolutions without content changes.

Demo

CSS3 Media Queries

Just look into demo and try to change browser window size to see media queries in action.

Max Width

Next CSS will be applied if the browser window width is smaller then 600px:

@media screen and (max-width: 600px) {
    .class {
        background: #ccc;
    }
}

If you want to specify different styles, just insert next code into the head tag:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width

Next CSS will be applied if the browser window width is more then 900px:

@media screen and (min-width: 900px) {
  .class {
    background: #666;
 }
}

Several Media Queries

You can combine several media queries. Next code will be applied if the width of the view port more then 600px and smaller then 900px:

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
 }
}

Device Width

Next code will be applied if max-device-width 480px (for example iPhone screen). max-device-width means resolution of the device’s screen and max-width means resolution of the view port.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

For iPhone 4

Next code is presented specially for iPhone: (thanks to Thomas Maier):

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

For iPad

On iPad media quaery can be osed for orientation detection (portrait or landscapse) (thanks to Cloud Four):

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

Media Queries for Internet Explorer

It is not a surprise, but media queries is not supported in Internet Explorer 8 and earlier. You can use JavaScript for hack. Here are some solutions:

Website Examples

Hicksdesign
  • Large size: 3 sidebars
  • Less than 2 sidebars (left middle column replaced)
  • More than 1 sidebar (right column moved under the logo)
  • Minimum: no sidebar

Hicksdesign

Colly

The layout switches between single column, two columns and four columns.

Colly

A List Apart

Large Size: navigation on top, one line of images Middle size: navigation on the left, 3 column images Small size: navigation on top, no background on the logo, 3 column images.

A List Apart

It is almost the same as previous example Colly, but the difference is in TeeGallery pictures’ size. They are changed based on the layout changes. The trick is in relative % value instead of fixed pixel (for example width=100%).

Tee Gallery

Conclusion

Keep in mind that the presence of an optimized stylesheet does not imply optimization for mobile device. To be fully optimized for mobile device your images and layout should be adjusted to reduce the download time. Media queries are developed for presentation, but not for optimisation.

Demo

Thanks for reading.