demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS media queries

mobile / introduction

Estimated reading time: 1 minute, 53 seconds

Traditional CSS supported display rules for a limited number of devices, such as all, screen, print, handheld, television, and projector. None of these made any conclusions about the size, orientation, or resolution of the device: a “screen” could be 4 inches wide or 400, and the same presentational rules would apply to both. CSS 2.1 and up provides an alternate and impressive array of controls that allow you to target style rules to devices with particular capabilities, via media queries:

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="styles_h.css" />

In the code above, styles_h.css will only be used by devices that are screen based and have a maximum width of 480 pixels. Note that this is device width: if you wished to use a stylesheet that targeted a browser that was minimized to 480 pixels wide, the syntax changes slightly:

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

This rule would work for both smartphones and minimized browsers running on a desktop computer, and is generally considered to be the better option. However, writing separate stylesheets for different media formats and screen sizes is neither practical nor efficient: when the browser loads the page it will access all of the referenced stylesheet files, regardless of the current resolution. These extra HTTP requests will slow the load time of your page. It's usually a far better practice to incorporate all of your designs into a central styles.css stylesheet, using the @media syntax: capabilities, via media queries:

/* standard CSS rules read by all devices and applicable to all resolutions */
html, body { }
@media print { 
	/* specific CSS rules for print, added only if they conflict with the rules above */
}
@media only screen and (max-width : 1200px) {
	/* style rules for desktops and laptops with smaller screens, again only added if the rules here conflict with those at the topof the stylesheet */
}
@media only screen and (min-width : 768px) and (max-width : 1024px) {
}
@media only screen and (max-width : 480px) {
}

It’s important to note that these “breakpoints” should not be dictated by the dimensions of popular devices, but by where your site needs intervention.

Even without specific @media queries, a website designed to fluid principles will usually scale well when displayed on smaller devices. If you find that this is not the case, the addition of a meta tag in the <head> may help:

<meta name="viewport" content="width=device-width, initial-scale=1">

Finally, it should be noted that while it is possible to nest media queries:

@media screen {
body { background: yellow }
@media (min-width: 0px) {
body { background: green }
}
}

…nested code is not currently supported in IE, or versions of Safari prior to 6.1

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.