【問題&解決】手機網頁Html代碼實作（解決顯示頁面很小的問題）

工作需要，要做一個手機自适應的網頁效果，終于搞定，先分享并記錄！

其實主要就是改掉HTML頁面聲明：

在網頁中加入以下代碼，就可以正常顯示了：

解釋：

width - viewport的寬度

height - viewport的高度

initial-scale - 初始的縮放比例

minimum-scale - 允許使用者縮放到的最小比例

maximum-scale - 允許使用者縮放到的最大比例

user-scalable - 使用者是否可以手動縮放 

精簡點的話，可以把上面的代碼更改為以下代碼，效果是一樣的：

最後就是不要設定太大的具體寬度屬性了，比如你在網頁把Body的寬度屬性設為1000px，這肯定是不行的了，但是可以設定為90% 或者 auto，這是螢幕自适應的。

 -----------------------------------補充：我是快樂的分割線  ---------------------------------------------------

相對大小的字型

字型也最好不要使用絕對大小（px），而是使用相對大小（em）。

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

然後，h1的大小是預設大小的1.5倍，即24像素（24/16=1.5）。

small元素的大小是預設大小的0.875倍，即14像素（14/16=0.875）。

流動布局（fluid grid）

另外，絕對定位（position: absolute）的使用，也要非常小心。

選擇加載CSS

它的意思就是，自動探測螢幕寬度，然後加載相應的CSS檔案。

上面的代碼意思是，如果螢幕寬度小于400像素（max-device-width: 400px），就加載tinyScreen.css檔案。

如果螢幕寬度在400像素到600像素之間，則加載smallScreen.css檔案。

除了用html标簽加載CSS檔案，還可以在現有CSS檔案中加載。

CSS的@media規則

同一個CSS檔案中，也可以根據不同的螢幕分辨率，選擇應用不同的CSS規則。

上面的代碼意思是，如果螢幕寬度小于400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。

圖檔的自适應（fluid image）

這隻要一行CSS代碼：

這行代碼對于大多數嵌入網頁的視訊也有效，是以可以寫成：

老版本的IE不支援max-width，是以隻好寫成：

本文轉自葉超Luka部落格園部落格，原文連結：http://www.cnblogs.com/yc-755909659/p/3605214.html，如需轉載請自行聯系原作者