寫(xiě)在前面的話(huà)：隨著(zhù)移動(dòng)設備的逐漸普及和Web技術(shù)的發(fā)展，跨端的Web開(kāi)發(fā)需求將會(huì )越來(lái)越大。如何在多種設備上進(jìn)行跨端的界面適配呢？我們可以利用CSS3的Media Query來(lái)實(shí)現。本文主要介紹了移動(dòng)開(kāi)發(fā)和CSS3結合，來(lái)進(jìn)行多種分辨率適配的例子。
文中提到的響應式網(wǎng)頁(yè)設計（Responsive web design）是一種現代網(wǎng)頁(yè)設計方法，基于CSS3的媒介查詢(xún)（Media Query）特性使得網(wǎng)頁(yè)適應不同設備，即根據設備的分辨率和縮放自動(dòng)重新布局。
-----------
譯自：
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps轉載請注明：來(lái)自蔣宇捷的博客（
http://blog.csdn.net/hfahe）
響應式網(wǎng)頁(yè)設計現在無(wú)疑是一件大事情。如果你還不了解響應式設計，可以看看我最近發(fā)表的
響應式站點(diǎn)列表（譯者注：可以好好看看示例中的網(wǎng)站在不同分辨率下的展現方式）。對新手來(lái)說(shuō)，
響應式設計可能有一點(diǎn)復雜，但是事實(shí)上比你想象的簡(jiǎn)單。為了幫助你迅速的了解響應式設計，我起草了一篇快速教程。你可以在3個(gè)步驟中學(xué)習到響應式設計和媒介查詢(xún)（Media Queries）的基本原理（假定你了解基本的CSS知識）。
第一步：Meta標簽（查看
演示）
大多數移動(dòng)瀏覽器將HTML頁(yè)面放大為寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的meta標簽來(lái)進(jìn)行重置。下面的視圖標簽告訴瀏覽器，使用設備的寬度作為視圖寬度并禁止初始的縮放。在<head>標簽里加入這個(gè)meta標簽。
view plain<meta name="viewport" content="width=device-width, initial-scale=1.0">
IE8或者更早的瀏覽器并不支持Media Query。你可以使用media-queries.js或者respond.js來(lái)為IE添加Media Query支持。
view plain<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
第二步：HTML結構
在這個(gè)例子里，我有一個(gè)包括頭部、內容、側邊欄和頁(yè)腳的基本頁(yè)面布局。頭部有固定的高度180像素，內容容器是600像素而側邊欄是300像素。
第三步：媒介查詢(xún)-Media Queries
CSS3 Media Query-媒介查詢(xún)是響應式設計的核心。它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁(yè)面。
當視圖寬度為小于等于980像素時(shí)，如下規則將會(huì )生效?；旧?，我會(huì )將所有的容器寬度從像素值設置為百分比以使得容器大小自適應。
然后為小于等于700像素的視圖指定#content和#sidebar的寬度為自適應并且清除浮動(dòng)，使得這些容器按全寬度顯示。
對于小于等于480像素（手機屏幕）的情況，將#header元素的高度設置為自適應，將h1的字體大小修改為24像素并隱藏側邊欄。
你可以根據你的喜好添加足夠多的媒介查詢(xún)。我在示例中僅僅展示了3個(gè)媒介查詢(xún)。媒介查詢(xún)的目的在于為指定的視圖寬度指定不同的CSS規則，來(lái)實(shí)現不同的布局。媒介查詢(xún)可以寫(xiě)在同一個(gè)或者單獨的樣式表中。
結論
這個(gè)教程想要為你展示響應式設計的基本原理。如果你想要更多進(jìn)階的教程，請看看我之前的教程：
使用媒介查詢(xún)進(jìn)行響應式設計。
