響應式web設計現在已經不是乙個難事了，如果你還不熟悉他，可以參看我的文章《html5實踐 -- 流式響應式設計》。如果你是乙個初學者，可能響應式設計對你來說有點發雜，但實際上他比你想象的要簡單的多。為了方便你更快的學習響應式設計，我特意寫了這個教程，通過簡單的三個步驟你就能掌握響應式設計的基本邏輯和media queries（假設你掌握css知識）。
大多數mobile瀏覽器，會將頁面的寬度調整至viewport寬度，用以適應螢幕顯示。這裡我們會使用到viewport標籤，例如下面的語句將新增在之間，告訴瀏覽器使用裝置的寬度作為viewport的寬度，取消initial scale的功能。
<ie8和之前的瀏覽器不支援media query，我們需要使用 media-queries.js 或者 respond.js 實現ie瀏覽器對media query的支援。 在這個例子中，我有乙個基本的頁面結構，包含header, content container, sidebar 和 footer。header的高度固定為180px，content container 的寬度為600px，sidebar 的寬度為300px。meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
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實踐系列
三步實現響應式網頁布局
第一步 meta標籤 大多數移動瀏覽器將html頁面放大為寬的檢視 viewport 以符合螢幕解析度。你可以使用檢視的meta標籤來進行重置。下面的檢視標籤告訴瀏覽器，使用裝置的寬度作為檢視寬度並禁止初始的縮放。在標籤裡加入這個meta標籤。viewport content width devic...
html5 響應式布局
一 什麼是響應式布局?響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移...
html5 響應式布局示例
響應式布局是ethan marcotte在2010年5月份提出的乙個概念，簡而言之，就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本。這個 概念是為解決移動網際網路瀏覽而誕生的。響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕 移動裝置的普及，用 ...