Wickham's XHTML & CSS tutorial

Sitemap | Home | Search

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 updates are mainly related to HTML 5 and CSS3 issues and it displays 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 IE6 to IE9

 

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.

If you haven't got a small-screen device for testing you can download Opera browser onto 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.