用3個步驟實現響應式網頁設計 · Web前端-關注HTML5與CSS3

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