轉載請註明原創地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787559.html
響應式web設計現在已經不是一個難事了，如果你還不熟悉他，可以參看我的文章《HTML5實踐 -- 流式響應式設計》。如果你是一個初學者，可能響應式設計對你來說有點發雜，但實際上他比你想象的要簡單的多。為了方便你更快的學習響應式設計，我特意寫了這個教程，通過簡單的三個步驟你就能掌握響應式設計的基本邏輯和media queries（假設你掌握css知識）。
demo預覽地址：http://webdesignerwall.com/demo/responsive-design/index.html
步驟 1. Meta標籤
大多數mobile瀏覽器，會將頁面的寬度調整至viewport寬度，用以適應螢幕顯示。這裡我們會使用到viewport標籤，例如下面的語句將添加在<head>之間，告訴瀏覽器使用裝置的寬度作為viewport的寬度，取消initial scale的功能。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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. HTML結構
在這個例子中，我有一個基本的頁面結構，包含header, content container, sidebar 和 footer。header的高度固定為180px，content container 的寬度為600px，sidebar 的寬度為300px。
步驟 3. Media Queries
CSS3 media query 是響應式設計所使用的技巧，他就像是在寫條件陳述式，告訴瀏覽器在特定viewport寬度下如何展示頁面。
例如，下面的命令將會在viewport的寬度等於或者小於980px的時候起作用。一般而言，我會用百分比的數值，而不是像素值來設定容器的寬度，這樣可以實現流式布局的效果。
當viewport等於或者小於700px的時候，設定 #content 和 #sidebar 的寬度為auto，並且移除 float， 這樣他們會以全部寬度方式顯示。
對於480px或者更小的mobile螢幕，設定#header的高度為自動，h1得字型大小為24px，同時隱藏#sidebar。
你可以根據需要添加很多media query，在我的demo中我只添加了三個media query。media query的目的針對特定viewport的寬度，使用不同的css實現頁面配置。media query可以在一個css檔案中，也可以分布在幾個css檔案中。
總結
本教程的目的是，向你展示響應式設計的基本要素，如果你想瞭解更多細節，可以參看我的文章《HTML5實踐 -- 使用CSS3 Media Queries實現響應式設計》。
原文地址：http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
HTML5實踐系列
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
