Slide 13
Slide 13 text
How do we
respond?
$44.FEJB2VFSJFT
UIBU`TIPX
1 @media only screen and (min-width: 960px) {
2 body {
3 width: 960px;
4 }
5 }
Monday, July 9, 12
So how do we respond to this new, narrow context? Well, we use the one technology that lets
us query the browser for context: CSS Media Queries.
CSS Media queries, a simple example of which is here, are snippets of css that only apply if a
given set of conditions are met. For example, this is our first rule to make this site work at a
full desktop’s width. We know the site looks good at 960px and larger, as that is the size of
our grid. So let’s make sure that rule applies at screen widths of greater than 960px.
in this case, the word screen applies to the media type, so it could be screen, print, all, braile,
that kind of thing. and min-width is, of course, the width of the context in pixels. that
context, by the way, is the layout viewport, which we’ll explain better closer to the end. for
now, we’re on the desktop, and it’s the size of our browser.
so in this example, 960px is called a breakpoint: our site’s behavior changes at 960px.