Responsive Design with Media Queries

It is a multimedia world. People experience and interact with web content with a variety of media, ranging from large-screen projections of websites to hand-held devices. This presents specific challenges for web designers.
One of those challenges revolves around designing pages that are accessible, inviting, and functional at highly varying sizes. A page with centered content, sidebars on the left and the right, and text flowing around images may be inviting on a laptop, but a jumbled mess on an iPhone.
With the advent of HTML5 and CSS3, it is possible to design pages that detect the size of a viewing device (the viewport), and to present unique page layouts customized for that device. So, for example, you can create three alternative views of a page—one for smart phones, one for tablets, and one for full-sized monitors. The approach is referred to as responsive design. The CSS3 technique for implementing it is a Media Query.

In this chapter, we'll learn to design pages in Dreamweaver that detect media viewports using Dreamweaver-generated Media Queries, and present appropriate page designs tailored to the visitor's viewing environment.
While doing that, we will:
•  Use Dreamweaver's Multiscreen Preview window to preview how sites will
look in different viewports
•  Customize Multiscreen Preview for specific devices
•  Create multiple styles for differently sized viewing devices with
Dreamweaver's Media Queries