自適應網頁設計的方法?

維護同一個網頁程式碼，即可使網站在多種瀏覽裝置（從桌面電腦顯示器到智慧手機或其他移動產品裝置）上需要具有更好的閱讀體驗，必須要自適應裝置解析度的要求。

工具/原料

各種瀏覽器

方法/步驟

在HTML頭部增加viewport標籤。

在網站HTML檔案的開頭，增加viewport meta標籤告訴瀏覽器視口寬度等於裝置螢幕寬度，且不進行初始縮放。程式碼如下：

這段程式碼支援Chrome、Firefox、IE9以上的瀏覽器，但不支援IE8以及低於IE8的瀏覽器。

在CSS檔案尾部增加針對不同螢幕解析度的規則。

例如使用如下的程式碼，可以讓螢幕寬度低於480畫素的裝置（如iPhone等），網頁側欄隱藏中部內容欄寬度自動調節。以下程式碼針對Z-Blog，WordPress相關標籤名稱只需修改一下即可。

@media screen and (max-device-width: 480px) { #divMain{ float: none; width:auto; } #divSidebar { display:none; } }

佈局寬度使用相對寬度。

網頁總體框架可以使用絕對寬度，但往下的內容框架、側欄等最好使用相對寬度，這樣針對不同解析度進行修改就方便。當然也可以不用相對寬度，那就需要在 @media screen and (max-device-width: 480px) 裡面增加各個div的針對小螢幕的寬度，實際上更麻煩。

頁面使用相對字型（非必要）

在HTML頁面上不要使用絕對字型（px），而要使用相對字型（em），對於大多數瀏覽器來說，通常用 em = px/16 換算，例如16px就等於1em。

圖片自適應（非必要）

img標籤的話，只需要設定 max-width: 100%;或width:100%; 語句為：img { max-width: 98%; }

css載入的background-image如何自適應大小呢，其實CSS3中是可以實現的，新增如下語句：background-size:100% 100%;

根據上面講述的幾點內容，就可以解決了煩人的瀏覽器相容問題了。

注意事項

多測試哦