當今銀屏分辨率從 320px (iPhone)到 2560px (大屏顯示器)或者更大。人們也不再僅僅用台式機來瀏覽網頁，現在有手機，平板電腦等等。所以傳統的固定寬度設計形式將不再是個最佳選擇，網頁設計需要有自適應性。網頁的布局需要能夠根據不同的分辨率和設備來自動調整，以達到到最佳顯示效果。接下來會展示如何運用HTML5和CSS3來設計一個自適應網頁。
先看看它的效果
在開始之前，點擊最終預覽來看看它的效果。改變瀏覽器的寬度，你將會看到頁面布局會跟着自動改變。
概述
當屏幕分辨率大於1024px時，網頁寬度將會是980px。用CSS3媒體查詢（Media query）來檢驗屏幕分辨率，如果小於980px，頁面寬度將會用自適應來取代固定寬度；如果小於650px，主題和邊欄（content container and sidebar ）將會撐滿屏幕並一列顯示。
HTML 代碼
以下只是代碼的主題結構，我用了“pagewrap”容器封裝 “header”, “content”, “sidebar”, 和 “footer” together.
<div id=”pagewrap”> <header id=”header”> <hgroup> <h1 id=”site-logo”>Demo</h1> <h2 id=”site-description”>Site Description</h2> </hgroup> <nav> <ul id=”main-nav”> <li><a href=”#”>Home</a></li> </ul> </nav> <form id=”searchform”> <input type=”search”> </form> </header> <div id=”content”> <article> blog post </article> </div> <aside id=”sidebar”> <section> widget </section> </aside> <footer id=”footer”> footer </footer> </div>
HTML5.js
請注意上面我用了html5，但低於IE9版本IE瀏覽器並不支持<header>, <article>, <footer>, <figure>等html5標簽，現在用js腳本來讓它們支持。
<!–[if lt IE 9]> <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script> <![endif]–>
CSS
把HTMl5元素定義成塊（display: block;）
下面將會用CSS吧HTML5元素 (article, aside, figure, header, footer等)定義成塊
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{display: block;}
主體結構的CSS樣式
“pagewrap”容器寬度為980px，header高度為160px.”content”容器寬600px且向左浮動，邊欄”sidebar”寬280px並向右浮動。
#pagewrap {width: 980px;margin: 0 auto;}
#header {height: 160px;}
#content {width: 600px;float: left;}
#sidebar {width: 280px;float: right;}
#footer {clear: both;}
第一步效果預覽
第一步演示：點擊我。注意現在還不能自適應，改變瀏覽器寬度后網頁結構並不會跟着改變。
CSS3媒體查詢（CSS3 Media Query）
媒體查詢腳本（Media Queries Javascript）
IE8或者更低的版本不支持CSS3媒體查詢，但通過添加腳本 css3-mediaqueries.js來實現這一功能。
<!–[if lt IE 9]> <script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script> <![endif]–>
媒體查詢CSS（Media Queries CSS）
為媒體查詢創建新的CSS樣式表，媒體查詢如何工作請查看我以前的教程（media queries ）
<link href="media-queries.css" rel="stylesheet" type="text/css">
分辨率小於980px（流動布局）
當屏幕分辨率小於980px時,以下規則將會執行:
- pagewrap = 寬 95%
- content = 寬60%
- sidebar = 寬 30%
@media screen and (max-width: 980px) { #pagewrap {width: 95%;} #content {width: 60%;padding: 3% 4%;} #sidebar {width: 30%;} #sidebar .widget {padding: 8% 7%;margin-bottom: 10px;} }
分辨率小於650px（一列布局）
當屏幕分辨率小於650px時,以下規則將會執行:
- header =寬度為自動(auto)
- searchform =搜索框距頂部5px(re-position the searchform to 5px top)
- main-nav = 靜態布置
- site-logo = 靜態布置
- site-description = 靜態布置
- content = 寬度為自動並取消浮動
- sidebar = 寬度為100%並取消浮動
@media screen and (max-width: 650px) { #header {height: auto;} #searchform {position: absolute;top: 5px;right: 0;} #main-nav {position: static;} #site-logo {margin: 15px 100px 5px 0;position: static;} #site-description {margin: 0 0 15px;position: static;} #content {width: auto;float: none;margin: 20px 0;} #sidebar {width: 100%;float: none;margin: 0;} }
分辨率小於480px
下面是小於480px時的CSS規則，主要針對iPhone
- html = 取消文字尺寸樣式。默認情況下iPhone會自動調整到適合，你可以通過添加” -webkit-text-size-adjust: none;”來取消自動調整。
- main-nav = 文字尺寸為90%
@media screen and (max-width: 480px) {
html {-webkit-text-size-adjust: none;}
#main-nav a {font-size: 90%;padding: 10px 8px;}
}
圖片的靈活顯示
為了讓圖片顯示更加靈活，只需設置 max-width:100% 和 height:auto。然而 max-width:100% 和 height:auto在IE7中運行，但不能在IE8中運行（詭異的BUG啊），所以需要為IE8添加width:auto\9。
img {max-width: 100%;height: auto;width: auto\9; /* ie8 */}
嵌入類視頻的靈活顯示
為了讓嵌入視頻顯示更加靈活，需要用上面同樣的方法。不知道是什么原因， max-width:100% （僅僅是視頻時）不能被Safari識別，此時要用 width:100%代替
.video embed,.video object,.video iframe {width: 100%;height: auto;}
初始化MeTa標簽 Initial Scale Meta Tag (iPhone)
默認情況下，iPhone的Safari瀏覽器會自動縮小頁面來顯示，下面來使用Meta標簽讓網頁字節按CSS樣式顯示。
<meta name="viewport" content="width=device-width; initial-scale=1.0">
最后，根據文檔我自己寫了一個自適應布局的例子。
<head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- 讓頁面的寬度跟設備的寬度一致，不出現橫向滾動條--> <title>自適應測試</title> <style type="text/css"> html,body{margin:0; padding:0;} div{display:block;} .content{width:1240px; margin: 0 auto;} .div{ width:600px;height:400px; margin: 10px;} #main1,#main3{float:left;} #main2,#main4{float:right;} @media screen and (max-width: 980px) {//設置寬度大於165小於980的時候，顯示兩列布局。 .content{width:100%;} .div{width:45%;height:600px;margin: 10px;} #main1,#main3{float:left;} #main2,#main4{float:right;} } @media screen and (max-width: 650px) {//設備可見寬度小於650的時候，用流式布局，為了不影響內容的顯示，只有一列布局。 .content{width:100%;} .div{ width:auto;height:400px; margin: 10px;} #main1,#main3{float:none;} #main2,#main4{float:none;} } </style> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> </head> <body> <div class="content"> <div id="main1" style="background:red;" class="div"></div> <div id="main2" style="background:blue;" class="div"></div> <div id="main3" style="background:black;" class="div"></div> <div id="main4" style="background:yellow;" class="div"></div> </div> </body>