Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Responsive CSS Media Queries in Adaptations

PVII Adaptations: When you need one page that fits all devices

29-Aug-2012

Adaptations Tutorials Home | Adaptations Home | Adaptations Examples

PVII Adaptations produces responsive Web pages that automatically adjust to the size of the browser window or the type of device being used. It even adapts to the orientation—portrait or landscape—of your mobile device.

The adaptable and responsive nature of Adaptations is driven by CSS3 Media Queries, which allow us to tailor the layout based upon parameters expressed in each query. Each Adaptations page you create is linked to a core CSS file and a response CSS file. The response CSS file for Layout 1 is called p7adapt-01-response.css and its queries are described below.

The Viewport Meta Tag

When you visit a website with a mobile browser, your device will assume that you're viewing a traditional Web page and that you want to see pretty much the whole page—not just the top left edge. To assist you, then, an iOS (iPhone/iPad) device will set its viewport width at 980px, squeezing the whole enchilada (page) into its small screen. Android devices will give you an overview, which would be nice if it were talking to you—but this overview involves displaying your page in a semi-readable way, which usually results in most of the page being past the right edge of the viewport. You will be able to read it in bits if you keep taking swipes at it. The remedy for this is to use the Viewport Meta tag configured thusly:

<meta name="viewport" content="width=device-width" />

This tag tells your mobile device, no matter the brand, to display your Web page according to its physical viewport size, as if the page were actually designed to fit, which in the case of a PVII Adaptations, it is. Setting this tag for a normal (non-responsive) Web page would result in something similar to Android's overview feature.

The Media Queries

Inside p7adapt-01-response.css you will find 7 media queries. Below we've listed the queries and added to the comments that come before each one. We've omitted the actual style rules inside the queries to make them easier for you to read:

/*1 Column for Narrow Browser Windows (between 0 and 679 pixels) and Smartphones in both orientations. In this query we linearize all of the columns so that they stack vertically by setting float to none and width to auto. We also use this query to move the menu to the top of the layout and stack its links neatly in a vertical orientation. */
@media only screen and (min-width: 0px) and (max-width: 679px) {
CSS rules for this query go in this space
}

/*Exception rules for Smartphones in Landscape orientation only. When a smartphone is turned sideways, the text will appear larger so this query contains a single rule that reduces the font-size.*/
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
CSS rules for this query go in this space
}

/*2 Column with top spanning menu for Medium Browser Windows and Portrait Tablets. In this query we move the navigation to the top and stack the links. The sidebar and main content areas remain as columns. The interior 3-column structure inside the main content column is reflowed so that the third column drops below the first 2 and spans their width.*/
@media only screen and (min-width: 680px) and (max-width: 979px) and (orientation : portrait) {
CSS rules for this query go in this space
}

/*Portrait Tablet Exceptions to adjust padding in content areas. In this query we include a simple exception rule to adjust the padding in all content areas to a value less than the default.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
CSS rules for this query go in this space
}

/*Additional Rules for Medium Desktop Browser Windows and Landscape Tablets to reflow the inner 3-column structure. When a tablet is turned sideways there is ample room to display the menu as a column so all we want to do here is reflow the inner 3-column structure that is inside the main content column so that the third column drops below the first 2 and spans full width. This query also creates a breakpoint for desktop browsers when the window is between 680 and 979 pixels.*/
@media only screen and (min-width: 680px) and (max-width: 979px) and (orientation : landscape) {
CSS rules for this query go in this space
}

/*Landscape Tablet Exceptions to adjust padding and reduce font size. When a tablet is turned sideways, the text will appear larger so this query contains rules that reduces the font-size and padding.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
CSS rules for this query go in this space
}

/*3 Column for Medium-Wide Browser Windows. This query sets a breakpoint for medium wide windows (between 980 and 1420 pixels) and reflows the inner 3-column structure inside the main content column to drop the third column below the first 2.*/
@media only screen and (min-width: 980px) and (max-width: 1420px) {
CSS rules for this query go in this space
}

See the finished page that uses the above media queries

Dreamweaver CS6

Dreamweaver CS6 supports media queries and actually gives you a way of testing your page in phone, tablet, and desktop size. Look for these icons along the bottom of your Dreamweaver window:

When you click the icon, Dreamweaver will create a tablet-width sub-window on your page in which your layout will be rendered. It will then look for any media queries for that device width and, if it finds one, it will render your layout according to the CSS in that query.

In closing

Media queries bring a lot of power to the Web designer's desk and they are supported by the vast majority of mobile devices currently offered for sale. The concept of using media queries to create responsive pages is a hot topic in Web design circles. Everyone, it seems, has written an article. As you read about responsive design and media queries you will find different methods—some of them good, others not so good. While we can't say with certainty that the method we employed for Adaptations is better than any other you might find, we can say for a fact that it's been thoroughly tested on the most popular devices currently available and that it affords a finer level of control than many other methods we've seen.