Three-step implementation of responsive page layouts

First step: Meta tags

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 labels tell the browser to use the width of the device as the width of the view and disallow 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.

<!--[if9]>      <script src="http://css3-mediaqueries-js.googlecode.com/ Svn/trunk/css3-mediaqueries.js"></script>  <![ Endif]-->  

Step Two: 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.

The third step: 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, depending on the condition.
When the view width is less than or equal to 980 pixels, the following rules will take effect. Basically, I'll set all the container widths from pixel values to percentages to make the container size adaptive.

Then specify the width of #content and #sidebar as adaptive and clear float for views less than or equal to 700 pixels, so that the containers are displayed at full width.

For cases less than or equal to 480 pixels (phone 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 as many media queries as you prefer. I've only shown 3 media queries in the example. The purpose of the media query is to specify different CSS rules for the specified view width to implement different layouts. Media queries can be written in the same or a separate style sheet.

Three-step implementation of responsive page layouts