HTML5 practice-three-step responsive design

Document directory

• Step 2. html Structure
• Summary

Reprinted please specify original address: http://www.cnblogs.com/softlover/archive/2012/11/25/2787559.html

 

Responsive web design is no longer difficult now. If you are not familiar with it, you can refer to my article HTML5 practices-stream responsive design. If you are a beginner, responsive design may be a little complicated for you, but it is actually much simpler than you think. I wrote this tutorial to help you learn responsive design more quickly, with three simple steps, you can master the basic logic of responsive design and media queries (assuming you have knowledge of CSS ).

Demo preview: http://webdesignerwall.com/demo/responsive-design/index.html

 

　　Step 1. meta tag

Most mobile browsers adjust the page width to the viewport width to adapt to screen display. Here we will use the viewport label. For example, the following statement will be added between

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

IE8 and earlier Browsers Do not support media query, we need to use media-queries.js or respond. js to achieve IE browser support for media query.

<!--[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, I have a basic page structure, including Header, content container, sidebar, and footer. The header height is fixed to 180px, the content iner width is 600px, And the sidebar width is 300px.

 

　　Step 3. media queries

Css3 media query is a technique used by responsive design. It is like writing a conditional statement that tells the browser how to display the page under a specific viewport width.

For example, the following command will take effect when the viewport width is equal to or less than 980px. In general, I will use the percentage value instead of the pixel value to set the container width, which can achieve the streaming layout effect.

When the viewport is equal to or less than 700px, set the width of # Content and # sidebar to auto and remove float, so that they are displayed in full width mode.

For a 480px or smaller mobile screen, set # the header height to automatic, and the H1 font size to 24px while hiding # sidebar.

You can add many media queries as needed. In my demo, I only added three media queries. Media query uses different CSS to implement page layout based on the width of a specific viewport. Media query can be stored in a CSS file or several CSS files.

 

Summary

The purpose of this tutorial is to show you the basic elements of responsive design. If you want to learn more, see my article HTML5 practices-implementing responsive design with css3 media queries.

 

Address: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

 

HTML5 practice series