文中提到的響應式網頁設計（Responsive web design）是一種現代網頁設計方法，基於CSS3的媒介查詢（Media Query）特性使得網頁適應不同設備，即根據設備的分辨率和縮放自動重新佈局。
譯自：http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
轉載請註明：來自蔣宇捷的博客（http://blog.csdn.net/hfahe）
響應式網頁設計現在無疑是一件大事情。如果你還不瞭解響應式設計，可以看看我最近發表的響應式站點列表（譯者注：可以好好看看示例中的網站在不同分辨率下的展現方式）。對新手來說，響應式設計可能有一點複雜，但是事實上比你想象的簡單。爲了幫助你迅速的瞭解響應式設計，我起草了一篇快速教程。你可以在3個步驟中學習到響應式設計和媒介查詢（Media Queries）的基本原理（假定你瞭解基本的CSS知識）。
第一步：Meta標籤（查看演示）
大多數移動瀏覽器將HTML頁面放大爲寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的meta標籤來進行重置。下面的視圖標籤告訴瀏覽器，使用設備的寬度作爲視圖寬度並禁止初始的縮放。在<head>標籤里加入這個meta標籤。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!--[if lt IE 9]>
- <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
- <![endif]-->
在這個例子裏，我有一個包括頭部、內容、側邊欄和頁腳的基本頁面佈局。頭部有固定的高度180像素，內容容器是600像素而側邊欄是300像素。
CSS3 Media Query-媒介查詢是響應式設計的核心。它根據條件告訴瀏覽器如何爲指定視圖寬度渲染頁面。
當視圖寬度爲小於等於980像素時，如下規則將會生效。基本上，我會將所有的容器寬度從像素值設置爲百分比以使得容器大小自適應。
結論
這個教程想要爲你展示響應式設計的基本原理。如果你想要更多進階的教程，請看看我之前的教程：使用媒介查詢進行響應式設計。