HTML5 移動頁面自適應手機屏幕四類方法

1、使用meta標籤：viewport

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

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

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

viewport標籤極其屬性：

每個屬性的詳細介紹：

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中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這隻適合布局簡單的頁面，複雜的頁面實現很困難。

寫在最後

最近經常有很多程序員朋友問我有沒有什麼學習資料，尤其是前端還有php的。因為本人是學全棧的，所以手裡是有一些前端還有PHP全套視頻學習資料。這些資料絕對比那些在群里漫天飛的資料強多了。相信看完這些，你絕對可以找到一份好工作！

為了感謝大家的支持，今天我在這裡統一說下吧：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！