移动web已经是大势所趋，所占份额迅猛增加。如果没有足够时间和精力做一套完全全新的移动端程序，那么，响应式设计也许是个不错的选择。不过，如果有条件并且需要移动端网页，移动端的很多优势还是不可替代的，比如定位功能。
响应式设计，使得可以使用同一网站在智能手机、电脑及其他设备上完美显示。它可以根据用户的屏幕尺寸，合理的为现在的和将来的设备提供好的浏览体验。
viewport
viewport指的是浏览器窗口内的内容区域，即网页实际显示的区域，而屏幕尺寸是指设备的物理显示区域。可以阻止浏览器自动调整页面大小：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
不过一般不会阻止用户手动缩放页面大小。
media-query
media query可以为特定的输出设备定制显示效果。已经得到了很多浏览器的大力支持。在不支持的浏览器IE6-8中，也可使用respond.js这个polyfill.
一些例子：
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" /> <link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" /> <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" /> <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /> <link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
如果想要减少请求，可以使用内联的media query进行层叠：
@media screen and (max-width:240px){
body{font-size:medium;}
}
在适应不同分辨率的设备时，应该保证内容优先，依照此原则来进行布局。
流式布局
使用media query可以针对不同分辨率的设备加载不同的css,但是仍然需要分很多情况，并且，在某些分辨率下表现可能不太理想。流式布局，即用相对单位，百分比进行布局。
与绝对单位的换算方式，就是目标尺寸/上下文尺寸=百分比尺寸。
一个简单的例子：
div.container {
margin: 0 auto;
width: 100%;
}
div.main {
width: 62.5%;
float: left;
}
div.aside {
width: 31.25%;
float: right;
}
如果要设置最大宽度和最小宽度，就指定元素的max-width和min-width,IE7+都支持了。
就是这些了，加油加油加油！
相关链接http://www.w3cplus.com/responsive/responsive-web-design-tips-and-notes.html
有一张图，比较好的说明了响应式设计的技术及应用场景：
图片转载自：图说
