HTML and CSS Reference
In-Depth Information
You can take the same approach for sites meant for the desktop. Code
the base style sheet with the appropriate baseline layout grid, font sizes,
and other measurements and serve it to all
screen
media using the
media type declaration. Then use media queries to provide enhance-
ments to those base styles and make a richer or cleaner experience
around the edge cases using responsive design patterns.
<style type=”text/css” media=”
screen
”>
/* standard 960px, fixed width two column definition */
[...]
@media
(max-width:959px)
{
/* make layout a single column */
[...]
}
@media
(min-width:1200px)
{
/* make layout three columns */
/* enlarge the font sizes */
[...]
}
[...]
</style>
