Detailed response HTML layout to achieve

The first step: in the head page code, add the line viewport meta tags

(1) viewport is a web default width and height, above this line means: the page width default to the screen width (width = device-width), the original scale (initial-scale = 1) of 1.0, i.e., the page initial 100% of the size of the screen area.

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

 

　　All major browsers support this setting, including IE9. For those older browsers (mainly IE6,7,8), requires the use css3-mediaqueries.js.

<!--[if lt IE 9]> 　　　 　
    <script src="http://css3-mediaqueries- js.googlecode.com/svn/trunk/css3-mediaqueries.js">
    </script> 
<![endif]-->

（2）X-UA-Compatible

　　X-UA-Compatible is set IE8 since a newly added for the following IE8 browser is not recognized. By setting the value of the X-UA-Compatible in the meta can be specified page the compatibility mode.

　　 #IE browser, regardless of whether a DTD declaration document standard, IE8 / 9 IE7 engine will be to render the page.

<meta http-equiv="X-UA-Compatible" content="IE=7"> 

　　#IE browser, IE8 / 9 will be to IE8 engine to render the page.

<meta http-equiv="X-UA-Compatible" content="IE=8">

　　#IE browser, IE8 / 9 and later will be the highest version of IE to render the page.

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">

　　# IE = edge to tell IE to use the latest Web page rendering engine, chrome = 1 you can activate Chrome Frame.

　　chrome = 1 here is not to say that technology enhances IE can simulate the Chrome browser, but the Google developed Google Chrome Frame (Google browser embedded framework GCF) related. This plug-in allows users of IE browser look the same, but the user is actually used when browsing the web is Chrome kernel, and support for IE6 Windows XP and older systems / 7/8.

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Step two: Fluid Layout

　　Page position of the respective blocks are floating, not fixed, if the width is too small to fit two elements, the latter elements are automatically scrolled to the bottom of the front elements, in the horizontal direction will not overflow (overflow) to avoid the horizontal scroll bar appears

.left{ width:30%; float:left}
.right{ width:70%; float:right;}

The third step: CSS @media rule of selective loading CSS

@media screen and (max-device-width: 400px) {  .left{ float:none;} }

　　When the screen is less than 400, left floating canceled.

　　Core "RWD", is the introduction of CSS3 Media Query module. Automatic detection of the width of the screen, and then load the appropriate CSS file, if the screen width is less than 600 pixels (max-device-width: 600px), loads the file css600.css. If the width of the screen between the pixel 600 to pixel 980, is loaded css600-980.css file.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />

　　In addition to loading CSS file with html tags, you can also load an existing CSS file

@import url("css600.css") screen and (max-device-width: 600px);

Step four: Do not use absolute width, font size

　　（1）width:auto; / width:XX%;

　　(2) The default font size is the page size of 100%, i.e., 16 pixels. Do not use absolute font size "PX", to use the relative size of the "REM"

html{font-size:62.5%;} 
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

Step five: Adaptive pictures

　　"RWD" must also implement automatic image scaling.

img, object {max-width: 100%;}

　　Older versions of IE do not support max-width, so I had to write:

img {width: 100%;}

　　When the windows platform scale the image, image distortion may be visible. In this case, try using proprietary command IE

img { width:100%; -ms-interpolation-mode: bicubic;}

　　Or use js - imgSizer.js

addLoadEvent(function() { 　　　　
        var imgs = document.getElementById("content").getElementsByTagName("img"); 
　　　　 imgSizer.collate(imgs); 　　
});