Understanding media queries

As I mentioned during the intro movie for this chapter, media queries are one of…the primary components of a responsive web design.…Defined in the CSS3 spec, a Media Query is a recognized value of the media…attribute that allows specific CSS rules or external style sheets to be applied…conditionally, like if the current device has a screen of a certain width.…You can, for example, start out with a basic Desktop design, and then you can…set up one set of CSS rules that are applied if the width of the display…screen is at a minimum 768 pixels, like an iPad or other Tablet, and establish…another set of CSS rules that kick in when the screen is at least 320 pixels, like an iPhone.…

There is no limit to the number of Media Queries you can establish,…that's totally up to you.…Browser support for Media Queries is very robust and they're increasingly being used.…Let me show you a few examples with the help of Dreamweaver's Live view to give…you an idea of what's possible. Let's start with a really graphic example.…