Wickham's XHTML & CSS tutorial

CSS Media Queries for Responsive Layouts

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

Responsive Layouts generally

1 gold icon The number of users viewing websites with small-screen devices like mobile phones has been increasing rapidly. Website pages with widths suitable for desktop or laptop computers mean that users of small-screen devices have to do a lot of scrolling sideways. Coding pages with CSS Media Queries can make a responsive layout where element widths are disabled and elements are shown in vertical format and images are made fluid width to fit the small viewport.

The use of Media queries means that the layout and design of a page is destroyed and the emphasis is on ease of use for a user of a small screen device, especially if it has a touch screen. At certain zoom levels images may be deleted and a drop down or fly-out menu may have overlapping tabs at certain zoom levels, but changing the zoom level should result in all menu tabs in a vertical list for easy scrolling, so a user of a small screen device needs to know how to get the best display.

If you haven't got a small-screen device for testing you can use Opera browser on a desktop or laptop, make the window width smaller and the use View, Fit to Width to see a simulation. Drag the window wider and narrower and use the zoom control at the bottom of the Opera window.

Alternatively, download Opera Mobile Emulator which will give you a selection of hand-held devices to check.

One benefit of using Media Queries is that you can set images to width: 100% which means that they will fit the viewport width and scale vertically to maintain the aspect ratio. However, any text on the image will be too small to read at certain zoom settings in a small-screen device and at another zoom setting all images are deleted to save space in the viewport and minimise scrolling. If you set images to be a fixed width, then the benefits of using Media Queries for small screen devices is lost.

Note that there are two ways to code media queries - either code your page for large viewports first in your default styles, then apply media query styles for smaller width viewports using max-width in decreasing width order, or code for the smallest width viewport first in the default styles then apply media query styles for larger viewports using min-width in increasing width order. The latter method seems to be the modern way.

Useful links

Kyle Schaeffer has written a simpler tutorial showing the coding required for the max-width method which may be easier for a beginner to understand. Styles for the large width viewports should be coded first, followed by max-width break points for widths in decreasing order.

A List Apart also has a useful tutorial.

HTML5 Rocks Tutorials uses the min-width modern method. Styles for the smallest width viewport should be coded first, followed by min-width break points for widths in increasing order.

Using the examples in the links above, it's a good idea to have the default styles at the top of your css file and the @media styles at the bottom of your stylesheet so that the @media styles are processed last and not superseded by any styles that repeat in your general styles, like this:-

Kyle Schaeffer method:-

#wrapper {/*styles here for large viewport widths*/}
img { max-width: 100%; }
/*Other default main styles for large viewport widths here*/
@media screen and (max-width: 600px) {/*styles here*/}
@media screen and (max-width: 320px) {/*styles here*/}

HTML5 Rocks method:-

#wrapper {/*styles here for the smallest width viewport*/}
img { max-width: 100%; }
/*Other default main styles for the smallest viewport width here*/
@media screen and (min-width: 600px) {/*styles here*/}
@media screen and (min-width: 1000px) {/*styles here*/}

Remember to add the following in the page head section:-