1. Allow automatic adjustment of web page width
First, add a line of viewport meta tags at the head of the web page code
<meta name="viewport" content="width=device-width, initial-scale=1" />viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。 <!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->2. Do not use absolute width
Since the width of the web page will automatically adjust, when the element width is a fixed value, the automatic adjustment of the web page will deform the page.
Try to use percentage or auto to determine element width.
width: xx%; width:auto;3. Use relative font sizes
body {
font: normal 100% Helvetica, Arial, sans-serif;
}//上面的代码指定，字体大小是页面默认大小的100%，即16像素。 h1 {
font-size: 1.5em;
}//然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。small {
font-size: 0.875em;
}//small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。4. Mobile layout
The meaning of fluid layout is that the position of each block is floating and not static.
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}The advantage of float is that if the width is too small to fit two elements, the following element will automatically scroll below the previous element and will not overflow in the horizontal direction, thus avoiding the appearance of horizontal scroll bars.
5. Use of positioning
You must be careful when using fixed positioning, because fixed positioning cannot be adjusted to follow the width and height of the page, so the page will cause some elements to shift.
Absolute positioning and relative use should also be used with great care.
6. Choose to load css
"自适应网页设计"的核心，就是CSS3引入的Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件 <link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />//上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。 <link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />//如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。//除了用html标签加载CSS文件，还可以在现有CSS文件中加载7. @media rules of css
In the same css file, you can also choose to apply different css rules according to different screen resolutions.
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
//上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
}8. Adaptation of pictures
When the page is reduced or enlarged, the pictures on the page should also be reduced or enlarged accordingly.
img { max-width: 100%;}//这行代码对于大多数嵌入网页的视频也有效，所以可以写成：Note here: The old version of IE does not support max-width, so it can be written as
img { width: 100%; }In addition, when scaling images on the Windows platform, image distortion may occur. At this time, we can use IE's proprietary commands.
img { -ms-interpolation-mode: bicubic; }Or Ethan Marcotte’s imgSizer.js
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});by referring to Teacher Ruan Yifeng 's development manual.