Media query syntax

Posted in Articles

Media queries are conditional CSS rules.

For example, the following written in the CSS stylesheet …

@media screen and (min-width:768px) {
   h1 { font-size: 2em; } 
}

means to apply the h1 CSS rule only if viewed on screen media that is greater than 768 pixels.

Or you can write the following in the link tag in the head of the HTML document …

<link rel="stylesheet" href="normal.css" media="screen and (min-width:768px)" />

Or can use it in an @import statement as in …

@import url("normal.css") screen and (min-width: 768px);

Device features that we can test for using media queries

Besides min-width, there is also max-width that we can test for.  In addition to “width”, we can also test for the following features (some of which accepts the ”min-” and “max-” prefix) …

• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• resolution

and others.

For example, we can write …

@media screen and (max-device-width: 480px) and (orientation: landscape) { ... }

Notable widths for media queries

When creating responsive web design, some notable widths to keep in mind when using such media queries are …

320px – typical width of smartphone in portrait mode

480px – typical width of smartphone in landscape mode

600 pixels – typical width of small tablets (Kindle and Nook) in portrait mode

768 pixels – typical width of 10 inch tablets such as the iPAD in portrait mode

1024 pixels – typical width of iPads in landscape mode, some laptops, netbooks, and desktops

1200 pixels – full widescreen displays that are typically only available on laptops and desktops.

This article was written in 2012, so these numbers may have changed as devices increase in resolution.