1：Meta標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

2，IE8或者更早的瀏覽器並不支援Media Query。在此引入respond.js

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

 <script src="respond.src.js"></script>
 

4，媒介查詢-Media Queries
CSS3 Media Query-媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何為指定檢視寬度渲染頁面。
當檢視寬度為小於等於1440畫素時，如下規則將會生效。基本上，我會將所有的容器寬度從畫素值設定為百分比以使得容器大小自適應。

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1440px or less */
@media screen and (max-width: 1440px) {
	
	#pagewrap {
		width: 94%;
	}
	#content,#content1,#content2,#content3 {
		width: 23%;
	}
	h2 {
		font-size: 28px;
		color:#000;
	}
}
 

對於小於等於700畫素的情況，容器會為類似“瀑布流”模式

/* for 700px or less */
@media screen and (max-width: 700px) {

	#content,#content1,#content2,#content3{
		width: auto;
		float: none;
	}

}

如圖：

下面分別為幾種解析度下Media Queries的效果：

1440

1366

1280

1152

1024

<700(移動裝置示例)

核心技術參考自http://blog.csdn.net/hfahe/article/details/7082718/