How does "responsive web design" work? It's actually not difficult.
First, add a line of viewport meta tags to the head of the web page code.
viewport is the default width and height of the web page
①Compatibility: All major browsers support this setting, including IE9. For those older browsers (mostly IE6, 7, 8), need to use (css3-mediaqueries.js)
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
②Do not use absolute width
You cannot use layouts with absolute widths, and you cannot use elements with absolute widths. This one is very important.
Specifically, CSS code cannot specify a width in pixels: width:** px;
Only percentage widths can be specified: width: **%; or width:auto;
③ Relative size font
Fonts also cannot use absolute size (px), but only relative size (em)
body {font: normal 100% Helvetica, Arial, sans-serif;}
The above code specifies that the font size is 100% of the default size of the page, which is 16 pixels
h1 {font-size: 1.5em; }
Then, the size of h1 is 1.5 times the default size, which is 24 pixels (24/16=1.5)
small {font-size: 0.875em;}
The size of the small element is 0.875 times the default size, which is 14 pixels (14/16=0.875)
④ fluid layout (fluid grid)
The meaning of "fluid layout" is that the position of each block is floating, not fixed.
The advantage of float is that if the width is too small to fit two elements, the following elements will automatically scroll to the bottom of the previous elements, and will not overflow in the horizontal direction, avoiding the appearance of horizontal scroll bars.
另外，绝对定位（position: absolute）的使用，也要非常小心。
⑤选择加载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文件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
⑥CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) {
.column {float: none;width:auto;}
#sidebar {display:none;}
}
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）
⑦图片的自适应（fluid image）
除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码：
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
不过，有条件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。
学习：
html5/css3响应式布局介绍及设计流程，利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题