一、設定網頁寬度自動調整

這個比較簡單，只需要在網頁程式碼的頭部內加入一行viewport元標籤。

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport的說明：

viewport是網頁預設的寬度和高度，上面這行程式碼的意思是，網頁寬度預設等於螢幕寬度（width = device-width），原始縮放比例（initial-scale = 1）為1.0，即網頁初始大小佔螢幕面積的100%。所有主流瀏覽器都支援這個設定。

關於viewport的基本屬性：

width=device-width ：表示寬度是裝置螢幕的寬度

initial-scale=1.0：表示初始的縮放比例

minimum-scale=0.5：表示最小的縮放比例

maximum-scale=2.0：表示最大的縮放比例

user-scalable=yes：表示使用者是否可以調整縮放比例

二、不能使用絕對寬度

由於網頁會根據螢幕寬度調整佈局，所以不能使用絕對寬度的佈局，也不能使用具有絕對寬度的元素。這一條非常重要。

也就是說，程式碼裡面不能指定畫素寬度：

width: xxx px;

只能指定百分比寬度：

width: xx%; 或者 width: auto;

三、相對大小的字型

字型也不能使用絕對大小（px），而只能使用相對大小（em）。

body {  font: normal 100% Helvetica, Arial, sans-serif;}

上面程式碼指定，字型大小是頁面預設大小的100%，即16畫素。

 h1 { font-size: 1.5em;}

small { font-size: 0.875em; }

四、流動佈局（fluid grid）

“流動佈局”的含義是，各個區塊的位置都是浮動的，不是固定不變的。

.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; } 

float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢位），避免出現水平滾動條。另外，絕對定位（position: absolute）的使用也要非常小心。

五、圖片的自適應（fluid image）

除了佈局和文字，”自適應網頁“還必須實現圖片的自動縮放。

img { max-width: 100%;}

上面這行程式碼對於大多數嵌入網頁的視訊也有效，所以可以寫成：

img, object { max-width: 100%;}

其實完成了第五步，已經實現了我想要的效果了。

六、”自適應網頁設計“的核心，就是CSS 3引入的Media Query模組。它的意思就是，自動探測螢幕寬度，然後載入相應的CSS檔案。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen。css" />

上面的程式碼意思是，如果螢幕寬度小於400畫素（max-device-width: 400px），就載入tinyScreen.css檔案。

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />

如果寬度高度在400畫素到600畫素之間，則載入smallScreen.css檔案。