Three-Step complete adaptive web Design

Adaptive web Design has recently been popular, if you have less contact see responsive sites. Of course, it may sound a little complicated for a novice, but it's a lot easier than you think. Here is a quick tutorial by learning the fundamentals of Web pages and media queries you will adapt (if you have a CSS base).

Step 1:meta Label (View Demo: Demo)

In order to adapt to the screen, many mobile browsers will place the HTML page in a larger viewport width (typically larger than the screen width), you can use the viewport meta tag to set. The following viewport meta tag tells the browser that the viewport width is equal to the device screen width without initial scaling:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >

IE8 and its earlier versions do not support media query, and support can be implemented using Media-queries.js or respond.js scripts.

<!--[if Lt IE 9]> <script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script> <! [endif]-->

Step 2. HTML structure

In this example, the page layout includes the header, Content container, sidebar, and footer. Header fixed height is 180px, content container width 600px,sidebar width 300px.

Step 3. Media Queries

CSS3 Media query is the key to adaptive web design, like an IF condition statement in a high-level language that tells the browser to render a Web page based on the width of the viewport (this is equal to the browser width).

If the viewport width is less than or equal to 980px, the following rule takes effect.

This uses a percentage of the container pixel width, and the page layout is more flexible.

If the viewport width is less than or equal to 700px, set the #content and #sidebar widths to Automatic (auto width) and remove its floating property (float) so that it becomes full-version.

When the viewport width is less than or equal to 480px (such as the phone screen), the #header height is set to Automatic, the H1 font size is set to 24px, and the #sidebar is hidden.

Depending on your preferences, you can define more media queriey conditions

Summary

Here is just a quick tutorial, more see Using CSS3 Media queries for web-adaptive

Three-Step complete adaptive web Design