做一款軟件首先是要做出相應的界面，然而對于手機軟件開發者來說，大小各異的手機屏幕卻給我們帶來了不少的麻煩。HTML5技術在大家的心中要比傳統的Android/iOS/wp簡單的多，因為它的適配性和平臺跨越方面比較出色。在外看來卻不是那樣的，跨平臺的問題暫且不說，其屏幕適配方面并不比原生態代碼簡單。下面給大家分享下我總結出來的H5界面適配：
一、Media Queries
網上一搜一大把的一個方式MediaQueries，在CSS中寫下不同屏幕下使用不同的CSS來實現屏幕適配，這個方式不但可以進行字體的適配還能實現不同界面顯示不同的樣式：
1：CSS中根據要求寫不同的屏幕范圍，如下:
@media screen and (min-width: 240px) and(max-width:319px){
??? html {font-size: 10px; }
}
2：HTML代碼頭部添加下面一段：
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1.0,user-scalable=no;" />
這里的各項參數所代表的意思可以另行百度。
這種方式跟android中通過多個drawable、layout、value文件夾各自編寫XML界面的方式相同。
?
二、em和rem的使用
避免px單位的使用是個很重要的一點。這里用em和rem來代替px。
em：根據父標簽的字體大小來設置當前標簽的寬高或字體大小。如：
<div id=”a”>
<div id=”b”></div>
</div>
如果給b設置字體大小為0.5em，則b的字體大小將會是a的一半。但是本人并不推薦大量使用em，因為這會讓你的計算變得困難。試想，當多層嵌套時都使用em那最里面的字體將是最外層標簽字體的幾分之幾呢？
rem：根據跟標簽的字體大小來適配當前標簽的寬高或字體大小。
這個單位推薦使用，所謂的跟標簽，對于html代碼來說，自然就是最外層的<html>標簽了。不管自己的html代碼有多少層的嵌套rem單位總是根據<html>標簽字體來計算。
?
三、百分比的使用
要想屏幕適配的好，就多用百分比來作為寬高的值。這一般是用在css上。
?
四、絕對適配方案
不久前打開QQ郵箱，發現一個現象，當屏幕很小的時候QQ郵箱的字體就很小，當瀏覽器不斷的拖大的過程中字體就好跟著慢慢變大。這讓我甚是驚奇，我也一直想實現這樣的一個屏幕適配方案。后來有了下面的方案，其實就是為了把這個方案分享出去才會有了這篇文章，說起來也簡單，在采用rem作為大小單位的同時通過js根據屏幕大小計算出一個合適的數值賦值給當前的html即可。
在onLoad的時候執行下面的代碼（后面的20根據自己的需要來改）
??????? var fontSize = $(window).width()/20;//屏幕的寬
??????? $("html").css("font-size",fontSize +"px");
這里是引用了jQuery，因而上面兩行代碼也是jquery的代碼。
純JS代碼可以這樣寫：
var fontSize = document.body.clientWidth
var htmlElement = document.getElementsByTagName("html")[0];
htmlElement.style.fontSize=fontSize+”px”;
其實不難看出，就是拿當前的屏幕尺寸去除一個數值，得到字體大小，進而將這個字體大小賦值給heml跟節點（跟標簽）即可，然后全文設置字體大小或控件大小時使用rem作為單位。也可以配合百分比設置控件大小。這樣一來基本上可以根據屏幕尺寸完美縮放自己的界面了。
)
