預設情況下，頁面容器的寬度是980px，這個尺寸優化了大于1024px的分辨率。Media query用來檢查 viewport 寬度，如果小于980px他會變為窄屏顯示模式，頁面布局将會以流動的寬度代替固定寬度。如果 viewport 小于650px，他會變為mobile顯示模式，内容、側邊欄等内容會變為單獨列布局方式，他們的寬度占滿螢幕寬度。
在這裡，我不會介紹下面html代碼中的細節。下面是布局頁面的主架構，我們有一個“pagewrap”的容器包裝了"header", "content", "sidebar", 和 "footer"。
下面的css将會把html5的元素（article, aside, figure, header, footer 等）設定為塊元素。
在這裡我也不會解釋css檔案的細節。頁面主容器“pagewrap”的寬度被設定為980px。header被設定為固定高度160px。“content”的寬度為600px，靠左浮動。“sidebar”寬度設定為280px，靠右浮動。
建立media query所需的css，然後在頁面中添加引用。
當viewport小于980px的時候，将會采用下面的規則：
pagewrap = 寬度設定為 95%
content = 寬度設定為 60%
sidebar = 寬度設定為 30%
tips：使用百分比（%）可以使容器變為不固定的。
當viewport小于650px的時候，将會采用下面的規則：
header = 設定高度為 auto
searchform = 重新設定 searchform 的位置 5px top
main-nav = 設定位置為 static
site-logo = 設定位置為 static
site-description = 設定位置為 static
content = 設定寬度為 auto (這會使容器寬度變為fullwidth) ，并且擺脫浮動
sidebar = 設定寬度為 100%，并且擺脫浮動
下面得css是為了應對小于480px螢幕的情況，iphone橫屏的時候就是這個寬度。
html = 禁用文字大小調整。 預設情況，iphone增大了字型大小，這樣更便于閱讀。你可以使用 <code>-webkit-text-size-adjust: none; 來取消這種設定。</code>
main-nav = 字型大小設定為 90%
為了讓圖檔尺寸變得更為彈性，可以簡單的添加 <code>max-width:100%</code> 和 <code>height:auto。這種方式在IE7中正常工作，不能在IE8中工作，需要使用 <code>width:auto\9 來解決這個問題。</code></code>
為了使嵌入視訊也變得更加彈性，也可以使用上面的方法。但是不知道什麼原因，max-width:100% 在safari浏覽器中不能正常的在嵌入資源中工作。我們需要使用width:100% 來代替他。
預設情況下，iphone的safari浏覽器會收縮頁面，以适應他的螢幕。下面的語句告訴iphone的safari浏覽器，使用裝置寬度作為viewport的寬度，并且禁用initial-scale。
檢視最終的demo，調整浏覽器的大小，檢視media query 的行為。你也可以使用iPhone, iPad, 新版Blackberry, 和 Android 來檢視modile版的效果。
可以使用css3-mediaqueries.js來解決浏覽器不支援media queries的問題。
這一技巧可以建立自适應的設計，可以根據 viewport 的寬度重寫布局的css。
使用max-width:100% 和 height:auto，可以讓圖檔變得更加彈性。
使用width:100% 和 height:auto，可以讓内嵌視訊變得更加彈性。
使用-webkit-text-size-adjust:none，在iphone上禁用字型大小調整。
下面的語句實作了在iphone中，使用meta标簽設定viewport 和 inital scale。
好了，今天的教程到此為止。
<a href="http://www.cnblogs.com/softlover/tag/HTML5%E5%AE%9E%E8%B7%B5/">HTML5實踐系列</a>
<a href="http://www.vancl.com/?source=kbh1983&sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>