响应式布局的注意点

1、头部添加meta：

<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
<meta name="format-detection" content="telephone=no" />  
<meta content="default" name="apple-mobile-web-app-status-bar-style">

IE8或者更早的浏览器并不支持Media Query, 可以使用media-queries.js或者respond.js来为IE添加Media Query支持 :

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

2、头部添加link，不同屏幕分辨率使用不同的css样式：

<link media="only screen and (min-width: 980px)" rel="stylesheet" type="text/css" href="css/style1.css" /> //pc端样式
<link media="only screen and (min-width: 640px) and (max-width:979px)" rel="stylesheet" type="text/css" href="css/style2.css" /> //ipad等中型屏幕的样式
<link media="only screen and (min-width: 320px) and (max-width:639px)" rel="stylesheet" type="text/css" href="css/style3.css" /> //移动端样式

或者在同一个css文件里写不同分辨率所适配的样式，如下：
/* 当浏览器的可视区域小于980px */

@media screen and (max-width: 980px) {
#wrap {width: 90%; margin:0 auto;}
#content {width: 60%;padding: 5%;}
#sidebar {width: 30%;}
#footer {padding: 8% 5%;margin-bottom: 10px;}
}

/* 当浏览器的可视区域小于640px */

@media screen and (max-width: 640px) {
#header {height: auto;}
#searchform {position: absolute;top: 5px;right: 0;}
#content {width: auto; float: none; margin: 20px 0;}
#sidebar {width: 100%; float: none; margin: 0;}
}

3、各个模块尺寸尽量使用百分比。