Responsive layout for CSS3-responsive layout home/html/css/css3

To make a mobile Web page need to use a responsive layout, the first need to re-HTML file header:

The main purpose is to control the width and prohibit the user to zoom, the specific parameters themselves Google a bit.

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, User-scalable=no "/>

The following is the CSS to determine whether the PC-side or mobile-side
In fact, it is very simple, with CSS3 media query can be very convenient to achieve, do not need to use useragent God horse so troublesome.

/* Minimum width 800 is the PC side */@media all and (min-width:800px) {  #nav {    width:300px;    Float:left;    margin-right:20px;  }  #grid {    width:450px;    Float:left;}  } /* Maximum width 799 is the mobile end */@media all and (max-width:799px) {  #nav {    width:100%;  }  #grid {    width:100%;  }}

Knowing that the above 2 o'clock can implement the responsive layout, is it very simple?

Responsive layout for CSS3-responsive layout home/html/css/css3