Implement responsive Webpage Design in three steps

Preface: With the gradual popularization of mobile devices and the development of web technology, cross-end web development needs will become larger and larger. How can I adapt to different interfaces on multiple devices? We can use the media query of css3. This article mainly introduces the combination of mobile development and css3 for multiple resolution adaptation examples.
The responsive web design mentioned in this article is a modern web design method. Based on the media query feature of css3, the webpage can adapt to different devices, that is, the layout is automatically re-arranged based on the resolution and scaling of the device.

-----------
Translation: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Reprinted Please note: from Jiang Yujie blog (http://blog.csdn.net/hfahe)
Responsive web design is undoubtedly a big task. If you do not know about the responsive design, you can look at the list of responsive sites I recently published (Note: You can take a good look at the display methods of the websites in different resolutions in the example ). For new users, responsive design may be a little complicated, but actually easier than you think. To help you quickly understand responsive design, I drafted a quick tutorial. You can learn the basic principles of responsive design and media queries in three steps (assuming you understand the basic CSS knowledge ).
Step 1: meta tag (view demo)
Most mobile browsers enlarge HTML pages into a wide view (viewport) to match the screen resolution. You can reset the meta tag of the view. The view label below tells the browser to use the width of the device as the view width and disable the initial scaling. Add this meta tag to the <Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">IE8 or earlier Browsers Do not support media query. You can use media-queries.js or respond. js to add media query support for IE.
<! -- [If lt ie 9]> <br/> <SCRIPT src = "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </SCRIPT> <br/> <! [Endif] -->Step 2: HTML Structure
In this example, I have a basic page layout that includes the header, content, sidebar, and footer. The header has a fixed height of 180 pixels, the content container is 600 pixels, And the sidebar is 300 pixels.

Step 3: Media query-media queries
Css3 media query-media query is the core of responsive design. It tells the browser how to render the page for the specified view width based on the conditions.
When the view width is less than or equal to 980 pixels, the following rules will take effect. Basically, I will set the width of all containers from the pixel value to the percentage to make the container size adaptive.

Specify the width of # Content and # sidebar for a view smaller than or equal to 700 pixels as adaptive and clear floating, so that these containers are displayed in full width.

If the value is less than or equal to 480 pixels (mobile phone screen), set the height of the # Header element to adaptive, change the font size of H1 to 24 pixels, and hide the sidebar.

You can add enough media queries based on your preferences. In this example, only three media queries are displayed. Media query aims to specify different CSS rules for the specified view width to achieve different la S. Media queries can be written in the same or separate style sheet.
Conclusion
This tutorial will show you the basic principles of responsive design. For more advanced tutorials, see my previous tutorial: responsive design using media queries.