## Responsive Web Design: CSS Media Query

Media queries can be used to include style sheets (`media` attribute) or in CSS rules (`@media` rule) or `@import` statement

Three ways:

1. CSS rule

       @media screen and (max-width: 480px) {
                 /* rules for small screens */
                 .column { float: none; }
                 }

2. Link to stylesheet

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

3. @import statement

       @import url('smallscreen.css') screen and (max-width: 480px);

- Responsive Web Design by Ethan Marcotte on A List Apart
- Live Example