3 Steps to implement responsive web design

In the first place: with the gradual popularization of mobile devices and the development of web technology, there will be a growing demand for web development across ports. How to cross-end interface adaptation on a variety of devices. We can use CSS3 's media query to achieve this. This paper mainly introduces the combination of mobile development and CSS3, which is an example of multiple resolution matching.
The Responsive web design (responsive web designs) mentioned in this paper is a modern Web page design method, and CSS3 based media query features enable Web pages to adapt to different devices, that is, automatically rearrange according to the resolution and scale of the device.
-----------
From: Http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Reprint please specify: from Shiyute blog (http://blog.csdn.net/hfahe)
Responsive web Design Now is undoubtedly a big deal. If you're not aware of the response design, look at my recently published list of response sites: You can take a good look at the examples of how the sites are presented at different resolutions. Responsive design can be a bit more complicated for beginners, but it's actually simpler than you think. To help you quickly understand the response design, I drafted a quick tutorial. You can learn the basics of response design and media Queries (assuming you understand basic CSS knowledge) in 3 steps.
First step: Meta tags (view demo)
Most mobile browsers enlarge the HTML page to a wide view (viewport) to match the screen resolution. You can use the META tag of the view to reset it. The following View tab tells the browser that the width of the device is used as the width of the view and prevents the initial scaling. Add this meta tag to the [HTML]View plain copy <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.
[HTML]View plain Copy <!--[if Lt IE 9]> <script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-me Diaqueries.js "></script> <! [endif]--> Second Step: HTML structure
In this example, I have a basic page layout that includes the header, content, sidebar, and footer. The head has a fixed height of 180 pixels, the content container is 600 pixels and the sidebar is 300 pixels.
Step three: Media inquiry-media Queries
CSS3 Media query-Medium query is the core of responsive design. It tells the browser how to render the page for the specified view width, depending on the criteria.
The following rules take effect when the view width is less than or equal to 980 pixels. Basically, I set all container widths from pixel values to percentages to make the container size adaptive.
Then specify the width of the #content and #sidebar to be adaptive and clear the float for a view that is less than or equal to 700 pixels, so that the containers are displayed in full width.
For situations that are less than 480 pixels (mobile screen), set the height of the #header element to adaptive, modify the H1 font size to 24 pixels, and hide the sidebar.
You can add enough media enquiries to your liking. I only showed 3 media queries in the example. The purpose of a media query is to specify different CSS rules for the specified view width to achieve a different layout. Media queries can be written in the same or separate style sheet.
Conclusion
This tutorial wants to show you the basics of responsive design. If you want more advanced tutorials, see my previous tutorial: Use media queries for responsive design.