Code example of Responsive web design using CSS3 Media Queries
bobleah 270000CN12 Comments (7) Visits (156636)
With the introduction of CSS3 media queries, web developers can create CSS which enables a web page to adapt and respond to whatever device renders it. Creating a responsive design, one where elements on the web page are fluid, has never been simpler. If you have a basic understanding of CSS, then you possess all the skills required to get started with your own responsive design.
The term Responsive Web Design was coined by Ethan Marcotte, to describe the practice of flowing layouts, page elements and images, by leveraging media queries to support various device display properties. As the name suggests, this design technique allows a web page to respond in real time to both a users behavior (browser window size), and device platform (including orientation).
Code example of a responsive web page
@media (min-width: 481px) and (max-width: 768px)
Landscape smart phone
@media (min-width: 321px) and (max-width: 480px)
Portrait smart phone
@media (max-width: 320px)
Start by creating the standard CSS classes and setting default properties. I marked-up my CSS defaults to support both desktop and landscape tablets by limiting the major elements to a width of 1000px.
The media queries
Next create the media queries for each screen dimension your interested in supporting (responding to). Media queries are exactly like any other CSS element, you are simply providing an alternative set of CSS properties for the existing elements on your web page. The browser will respond by calling the proper @media each time the web page is loaded or a user re-sizes the browser window. Here are the three media queries I added support for:
Media queries enable my example to support landscape and portrait mode cleanly
Hints and Tips
Important! Set the following META keyword to force the device viewport to maintain the correct scale. Failure to include this META will result in your UI being pinched:
You can optionally configure webpages saved to the iphone's home screen to launch using WebKit directly. This will remove the Safari web browsers address bar & bookmarks bar giving your web page a native appearance:
Optionally provide a thumbnail image to represent bookmarked pages in iPhone:
You can run this example by clicking here. As you resize your browser window to different widths you will see the media queries adapt and flow the web page. You can download the complete HTML and CSS of this example by clicking here.
Media queries are not a total answer to mobile views, as they don't address page weight issues, which is another major consideration for mobile design. Hiding a div or resizing an image has no impact on their contribution to overall page weight, as elements set to display:none are still part of the DOM, and simply hidden from displaying visually.
However, by starting with a sound minimal design, leveraging media queries can result in a workable mobile solution for your website. The key is careful thought to page elements, image sizes, and overall copy content.
For the entire definition and specifications on media queries, please visit the W3C Media Queries module.