內容提要：隨着 3G 的普及，越來越多的人使用手機上網。同樣的內容，要在大小迥異的螢幕上，都呈現出滿意的效果，並不是一件容易的事。 
於是，網頁設計師不得不面對一個難題：如何才能在不同大小的裝置上呈現同樣的網頁？ 

隨着 3G 的普及，越來越多的人使用手機上網。 
手機的螢幕比較小，寬度通常在 600 畫素以下；PC 的螢幕寬度，一般都在 1000 畫素以上（目前主流寬度是 1366×768），有的還達到了 2000 畫素。同樣的內容，要在大小迥異的螢幕上，都呈現出滿意的效果，並不是一件容易的事。 
於是，網頁設計師不得不面對一個難題：如何才能在不同大小的裝置上呈現同樣的網頁？ 

很多網站的解決方法，是為不同的裝置提供不同的網頁，比如專門提供一個 mobile 版本，或者 iPhone / iPad 版本。這樣做固然保證了效果，但是比較麻煩，同時要維護好幾個版本，而且如果一個網站有多個 portal（入口），會大大增加架構設計的複雜度。 
於是，很早就有人設想，能不能” 一次設計，普遍適用”，讓同一張網頁自動適應不同大小的螢幕，根據螢幕寬度，自動調整佈局（layout）？

一、允許網頁寬度自動調整 
“ 自適應網頁設計” 到底是怎麼做到的？其實並不難。 
先，在網頁代碼的頭部，加入一行 viewport 元標籤。 
　　 
viewport 是網頁預設的寬度和高度，上面這行代碼的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為 1.0，即網頁初始大小佔螢幕面積的 100% 。 
所有主流瀏覽器都支持這個設定，包括 IE9 。對於那些老式瀏覽器（主要是 IE6 、 7 、 8），需要使用 css3-mediaqueries.js 。 
　　 
三、不使用絕對寬度 
由於網頁會根據螢幕寬度調整佈局，所以不能使用絕對寬度的佈局，也不能使用具有絕對寬度的元素。這一條非常重要。 
具體説，CSS 代碼不能指定畫素寬度： 
　　width:xxx px; 
只能指定百分比寬度： 
　　width: xx%; 
或者 
　　width:auto; 
四、相對大小的字型 
字型也不能使用絕對大小（px），而只能使用相對大小（em）。 
　　body { 
　　　　font: normal 100% Helvetica, Arial, sans-serif; 
　　} 
上面的代碼指定，字型大小是頁面預設大小的 100%，即 16 畫素。 
　　h1 { 
　　　　font-size: 1.5em; 
　　} 
然後，h1 的大小是預設大小的 1.5 倍，即 24 畫素（24/16=1.5）。 
　　small { 
　　　　font-size: 0.875em; 
　　} 
small 元素的大小是預設大小的 0.875 倍，即 14 畫素（14/16=0.875）。 
五、流動佈局（fluid grid） 
“ 流動佈局” 的含義是，各個區塊的位置都是浮動的，不是固定不變的。 
　　.main { 
　　　　float: right; 
　　　　width: 70%; 
　　} 
　　.leftBar { 
　　　　float: left; 
　　　　width: 25%; 
　　} 
float 的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向 overflow（溢位），避免了水平滾動條的出現。 
另外，絕對定位（position: absolute）的使用，也要非常小心。 
六、選擇載入 CSS 
“ 自適應網頁設計” 的核心，就是 CSS3 引入的 Media Query 模組。 
它的意思就是，自動探測螢幕寬度，然後載入相應的 CSS 檔案。 
　　 
上面的代碼意思是，如果螢幕寬度小於 400 畫素（max-device-width: 400px），就載入 tinyScreen.css 檔案。
　　 
如果螢幕寬度在 400 畫素到 600 畫素之間，則載入 smallScreen.css 檔案。 
除了用 html 標籤載入 CSS 檔案，還可以在現有 CSS 檔案中載入。 
　　@import url(“tinyScreen.css”) screen and (max-device-width: 400px); 
七、 CSS 的 @media 規則 
同一個 CSS 檔案中，也可以根據不同的螢幕解析度，選擇應用不同的 CSS 規則。 
　　@media screen and (max-device-width: 400px) { 
　　　　.column { 
　　　　　　float: none; 
　　　　　　width:auto; 
　　　　} 
　　　　#sidebar { 
　　　　　　display:none; 
　　　　} 
　　} 
上面的代碼意思是，如果螢幕寬度小於 400 畫素，則 column 塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar 塊不顯示（display:none）。 
八、圖片的自適應（fluid image） 
除了佈局和文字，” 自適應網頁設計” 還必須實現圖片的自動縮放。 
這隻要一行 CSS 代碼： 
　　img { max-width: 100%;} 
這行代碼對於大多數嵌入網頁的視訊也有效，所以可以寫成： 
　　img, object { max-width: 100%;} 
老版本的 IE 不支持 max-width，所以只好寫成： 
　　img { width: 100%; } 
此外，windows 平台縮放圖片時，可能出現影象失真現象。這時，可以嘗試使用 IE 的專有命令： 
　　img { -ms-interpolation-mode: bicubic; } 
或者，Ethan Marcotte 的 imgSizer.js 。 
　　addLoadEvent(function() { 
　　　　var imgs = document.getElementById(“content”).getElementsByTagName(“img”); 
　　　　imgSizer.collate(imgs); 
　　}); 
不過，有條件的話，知名還是根據不同大小的螢幕，載入不同解析度的圖片。有很多方法可以做到這一條，服務器端和客户端都可以實現。