10 Chapter 2
The second is to call an external style sheet using the @import directive:@import url('file') logic media and (expression);The third is to use media queries in an embedded style element or in
the style sheet itself with the extended @media rule:@media logic media and (expression) { rules }This method is the one I’ll use throughout the rest of this chapter,
as it’s clearer for demonstration purposes. Which method you use largely
depends on your own preference and the demands of your existing
stylesheet structure.
Now that I’ve introduced the declaration methods, let’s explore the syn-
tax. You should already be familiar with the media attribute—it declares the
media types that the styles are applied to, just as in the HTML link tag:<link href="style.css" rel="stylesheet" media="screen">The most common media type values are screen and print, and as with
the current syntax, you can use a comma-separated list to choose multiple
media queries (although that’s becoming less necessary as the other media
types become deprecated). If omitted, the media type defaults to all, soreSPonSive WeB deSiGn
In 2010, Ethan Marcotte wrote an article titled “Responsive Web Design”
(http://www.alistapart.com/articles/responsive-web-design/ ), in which he
cleverly consolidated contemporary thinking on making websites that adapt
to the devices used to view them through the power of media queries. Here
is what he said:
Now more than ever, we’re designing work meant to be
viewed along a gradient of different experiences. Responsive
web design offers us a way forward, finally allowing us to
“design for the ebb and flow of things .”
Since then, responsive design has fast become the norm; the majority
of developers think this way, and more sites every year are launched or
relaunched using responsive design methods. This sort of design is not without
its challenges—designing fluid, responsive sites especially has had to be recon-
sidered, as most design tools are simply not up to the job—but we can safely
say we’re on the path to creating a Web that can be consumed by anyone,
anywhere, in a way that’s been carefully considered to work with any device.