響應式佈局的注意點

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、各個模塊尺寸儘量使用百分比。