1, do not use absolute width
width:auto; / width:XX%;
2, the default font size is the page size of 100%, that is 16 pixels, do not use the absolute size of the "px", to use the relative size of the "rem"
{-size font HTML: 62.5%;}
body {font: 100% Normal Arial, Sans-serif; font-size: 14px; font-size: 1.4rem;}
HTML font size to font-size: 62.5%
The reason: the browser's default font size is 16px, rem px relationship is: 1rem = 10px, 10/16 = 0.625 = 62.5%, related to the sub-element size convenience of calculation, wrote most appropriate.
3, fluid layout
"Layout flow" means that the position of each of the blocks are floating, not fixed
{width .left: 30%; a float: left}
.right {width: 70%; a float: right;}
Thus, with the left and right floating floating, the benefits, if the width is too small, to fit two elements, back the elements are automatically scroll to the bottom of the front element, not horizontally overflow (overflow), to avoid the appearance of a horizontal scroll bar
4, choose to load CSS
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />
Meaning of this code is: 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, the file is loaded css600-980.css
<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />
5, Picture adaptation, "RWD" must also implement automatic image scaling.