If the mere mention of "responsive design" and "media queries" makes your eyes roll back in your head, we're going to unlock a bit of the mystery. A media query is simply a set of css rules that are only used when a device screen is within a specific size range.
The example above can be translated as "When the viewer's screen is 320 pixels or less, display the content according to these css rules..." This is actually pretty cool, because you can tweak, resize, move, hide, and change almost anything so it displays well on a variety of mobile devices and screen sizes.
Want to play? In this scenario, the footer area has four divs that sit side by side on the desktop view. The last div holds a simple calendar, but you would rather not display that content to your visitors who are using a cell phone or a tablet.
The main css rules look like this:
Since a cell phone screen is pretty small, we need the footer boxes to sit on top of each other rather than side by side. So we are going to target any screen that is smaller than 481 pixels, resize the footer boxes, remove the float property on some, and hide the last one:
But visitors who are on tablets have a larger screen. You would like for them to see the first two boxes sitting side by side, have the third box display below the top two but be wider, and still hide the fourth box:
Yes, this is a simplified example, but hopefully it will give you an idea of how the media queries work to serve your content to devices with smaller screens.
