- 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
Creating Style Sheets for Alternate Screen Sizes
The reason for rearranging the layout with separate CSS files for each device size is simple: A page layout that looks great and is perfectly functional on a desktop browser might look fine initially on a smaller screen (such as an iPad, iPhone, or Android device), but chances are that the browser on the mobile device will automatically zoom the page out to fit as much of it as possible on the device's screen. Making the user pinch, scroll, and zoom the screen just to see your content isn't a good user experience. Anticipating and adapting the page for the smaller screen size is a much better option. You're not changing the content of the page for different screen sizes; instead, you're changing the presentation of that content for a better user experience.
Dreamweaver's Media Queries dialog allows you to insert a link to a media query CSS style sheet, and it helps to build that style sheet for you. You can choose to insert the link to the media query style sheet on just the page that you're working on, or you can create a site-wide media query style sheet.
Although you can use Dreamweaver to create a style sheet optimized for a given screen size, the program can't create it for you automatically. You'll need to make your layout decisions and create the alternative style sheets yourself, though they'll usually be able to inherit many properties from the main desktop style sheet. The Media Queries dialog lets you create new blank style sheets for each of the screen sizes, or you can link to existing style sheets that you've already built. For this article, we already have the style sheet for the desktop size, so we'll create the tablet and phone style sheets, modify them as needed, and then link them all together in a new media queries style sheet that will be used by the whole site.
To create the two alternate style sheets, follow these steps:
- In the Files panel, find and select the desktop style sheet.
- Press Ctrl-D (Mac: Command-D) twice to duplicate the style sheet twice. Give the two duplicates the names phone.css and tablet.css, respectively, as shown in Figure 4.
- We'll modify the phone style sheet first. Double-click phone.css to open it in its own tab.
- We need to change three CSS rules in this style sheet. These rules need to be the same width as the phone viewport. Find the .container, .sidebar1, and .content rules. Change each rule's width property to 320 px in Code view; or set the CSS Styles panel to All to display all the CSS rules in the document's style sheet (if you wanted to display the rules for just the current selection, you would click Current), and make the changes in the Properties section of that panel, as shown in Figure 5.
- Next comes the tablet style sheet. Double-click tablet.css to open it in its own tab. Change the width property of the .container rule to 748 px (768 pixels, the width of the viewport, minus 10 pixels on each side of the container for padding). You can leave the sidebar at its default setting of 180 pixels. Finally, change the width property of the .content rule to 560 px (again, that's the width of the viewport, less the width of the sidebar and some extra padding).
- Choose File > Save All.
)
)