使用meta標籤：viewport
H5移動端頁面普遍使用的方法，理論上講使用這個標籤可以使用所有尺寸的屏幕，但是各設備對該標籤的解釋方法及支持程度不同，造成了不能兼容所有瀏覽器或系統。
viewport 是用戶網頁的可視區域。翻譯爲中文可以叫做"視區"。
手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶可以通過平移和縮放來看網頁的不同部分。
viewport標籤極其屬性： <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>每個屬性的詳細介紹：
屬性名 取值 描述（定義） 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-scalable yes/no 是否允許用戶手動縮放頁面，默認值yes
使用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一次定義方法如下：
<script type="text/javascript"> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根據你設置的html的font-size屬性值做適當的變化 }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>
使用媒體查詢
媒體查詢也是css3的方法，我們要解決的問題是適應手機屏幕，這個媒體查詢正是爲解決這個問題而生。
媒體查詢的功能就是爲不同的媒體設置不同的css樣式，這裏的“媒體”包括頁面尺寸，設備屏幕尺寸等。
example:如果瀏覽器窗口小於500px，背景將變爲淺藍色： @media only screen and (max-width: 500px){ body{ background-color: lightblue; } }
使用百分比
百分比指的是父元素，所有百分比都是這樣的。子元素的寬度爲50%,那麼父元素的寬度爲100%。
所以body寬度默認寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這隻適合佈局簡單的頁面，複雜的頁面實現很困難。