HTML5 移動頁面自我調整手機螢幕四類方法

1、使用meta標籤：viewport

H5移動端頁面自我調整普遍使用的方法， 理論上講使用這個標籤是可以適應所有尺寸的螢幕的， 但是各設備對該標籤的解釋方式及支援程度不同造成了不能相容所有流覽器或系統。

viewport 是使用者網頁的可視區域。 翻譯為中文可以叫做"視區"。

手機流覽器是把頁面放在一個虛擬的"視窗"（viewport）中， 通常這個虛擬的"視窗"（viewport）比螢幕寬， 這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機流覽器優化的網頁的佈局）， 用戶可以通過平移和縮放來看網頁的不同部分。

viewport標籤極其屬性：

每個屬性的詳細介紹：

屬性名取值描述width正整數 或 device-width定義視口的寬度， 單位為圖元height正整數 或 device-height定義視口的高度， 單位為圖元， 一般不用initial-scale[0.0-10.0]定義初始縮放值minimum-scale[0.0-10.0]定義縮小最小比例， 它必須小於或等於maximum-scale設置maximum-scale[0.0-10.0]定義放大最大比例， 它必須大於或等於minimum-scale設置user-scalableyes/no定義是否允許使用者手動縮放頁面， 預設值yes

2、使用css3單位rem

rem是CSS3新增的一個相對單位（root em， 根em）,使用rem為元素設定字體大小時， 是相對大小， 但相對的只是HTML根項目。 通過它既可以做到只修改根項目就成比例地調整所有字體大小， 又可以避免字體大小逐層複合的連鎖反應。

目前， 除了IE8及更早版本外， 所有流覽器均已支持rem。 對於不支援它的流覽器多寫一個絕對單位的聲明。 這些流覽器會忽略用rem設定的字體大小。

下面就是一個例子：

p {font-size:14px; font-size:.875rem;}

默認html的font-size是16px， 即1rem=16px， 如果某div寬度為32px你可以設為2rem。

通常情況下， 為了便於計算數值則使用62.5%， 即默認的10px作為基數。 當然這個基數可以為任何數值， 視具體情況而定。 設置方法如下：

Html{font-size:62.5%(10/16*100%)}

具體不同螢幕下的規則定義， 即基數的定義方式：可以通過CSS定義， 不同寬度範圍裡定義不同的基數值， 當然也可以通過js一次定義方法如下：

3、使用媒體查詢

媒體查詢也是css3的方法， 我們要解決的問題是適應手機螢幕， 這個媒體查詢正是為解決這個問題而生。

媒體查詢的功能就是為不同的媒體設置不同的css樣式， 這裡的“媒體”包括頁面尺寸， 設備螢幕尺寸等。

例如：如果流覽器視窗小於 500px, 背景將變為淺藍色：

@media only screen and (max-width: 500px) { body { background-color: lightblue; } }

4、使用百分比

百分比指的是父元素，

所有百分比都是這樣的。 子元素寬度50%， 那麼父元素的寬度就是100%；

所以body預設寬度是螢幕寬度（PC中指的是流覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了， 這只適合佈局簡單的頁面， 複雜的頁面實現很困難。