- Previewing at Multiple Sizes
- Creating Style Sheets for Alternate Screen Sizes
- Building the Media Queries Style Sheet
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Building the Media Queries Style Sheet
Now you're ready to create a media queries style sheet and link in the alternate sheets you just created. Follow these steps:
- Open the HTML document you want to style.
- Click the Multiscreen button in the Document toolbar; then click the Media Queries button in the Multiscreen Preview panel. The Media Queries dialog appears, as shown in Figure 6.
- We'll create a site-wide media queries style sheet. In the "Write media queries to" section of the dialog, click "Site-wide media query file."
- Click the Specify button. In the resulting dialog, choose either "Use existing file" or "Create new file" from the pop-up menu. If you chose to use an existing file, click the folder icon at the right side of the dialog and browse to the existing file. If you chose to create a new file, click the folder icon at the right side of the dialog and specify the name and location of the new style sheet. (I named mine mq.css.) Click OK.
- Because some devices play tricks when reporting their screen size (notably Apple's iPhones and iPads with high-resolution Retina displays), select "Force devices to report actual width" in the Media Queries dialog.
- To create media queries for smartphones and tablets, click the Default Presets button in the Media Queries dialog. In the list, Dreamweaver creates defaults for Phone, Tablet, and Desktop, as shown in Figure 7. If you want to create additional media queries for other devices you specifically want to target, click the plus (+) button at the bottom of the list.
- Now it's time to change the defaults to target the particular screen sizes we need, and point at appropriate CSS style sheets for each media query. When Dreamweaver creates the default presets, the first one (Phone) is selected. In the Properties section below the list (see Figure 8), you can change the description; for example, you might want to change Phone to Mobile. For a phone, you can leave the Min Width blank (implying zero pixels), but you should specify the largest width in Max Width. The default is the iPhone's 320 pixels. In the CSS File field, you can create or browse to the CSS style sheet you want to use for this preset. In this case, browse to the phone.css file.
- Click the Tablet preset. Notice that this style sheet's properties, shown in Figure 9, include a Min Width—which starts at 1 pixel wider than the Phone style sheet's Max Width—and a Max Width of 768 pixels (corresponding to the iPad in portrait mode). Browse to the tablet.css style sheet.
- Click OK to close the Media Queries dialog. In the <head> section of the HTML formatting for the document you're editing, Dreamweaver has created a new link to the site-wide media queries file. The mq.css style now has @import rules pointing to the three style sheet files, with the media query rule for each preset in the Media Queries dialog. Back in the Multiscreen Preview panel, the display for each viewport changes to reflect the layout specified in the style sheet associated with each viewport size, as shown in Figure 10.
)
)
)
The final preset, Desktop, has a Min Width of 769 pixels and leaves the Max Width field blank. It uses the desktop.css style sheet.
)
)
Media queries and alternate CSS style sheets are a powerful tool to make your site work well across the breadth of devices that people might use to view it. Dreamweaver's tools make setting up the media queries relatively easy, demystifying a previously confusing process. But, as we've shown here, there is still plenty of call for the designer to tweak each style sheet to work best with its intended kind of device.
Tom Negrino is the author or coauthor of more than 40 books, covering such diverse topics as iCloud, Dreamweaver, JavaScript, Keynote, Microsoft Office, CSS, and more. His latest books are Dreamweaver CS6: Visual QuickStart Guide and 10 Things To Do Before Upgrading to OS X 10.8 Mountain Lion (both by Peachpit Press, 2012). A longtime contributor to Macworld and other magazines, Tom has lived in the Sonoma wine country with his wife and frequent collaborator, Dori Smith, since they fled the Los Angeles area in 1999.