. This is my blog, where I talk about web design and development with 
Pro CSS3 Animation, Apress, 2013Traditional 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. CSS3 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) { /* iPads, most other tablets */}@media only screen and (max-width : 480px) { /* most smartphones */}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">