Html5做webapp中界面适配的问题总结
做一款軟件首先是要做出相應(yīng)的界面，然而對(duì)于手機(jī)軟件開(kāi)發(fā)者來(lái)說(shuō)，大小各異的手機(jī)屏幕卻給我們帶來(lái)了不少的麻煩。HTML5技術(shù)在大家的心中要比傳統(tǒng)的Android/iOS/wp簡(jiǎn)單的多，因?yàn)樗倪m配性和平臺(tái)跨越方面比較出色。在外看來(lái)卻不是那樣的，跨平臺(tái)的問(wèn)題暫且不說(shuō)，其屏幕適配方面并不比原生態(tài)代碼簡(jiǎn)單。下面給大家分享下我總結(jié)出來(lái)的H5界面適配：
一、Media Queries
網(wǎng)上一搜一大把的一個(gè)方式MediaQueries，在CSS中寫(xiě)下不同屏幕下使用不同的CSS來(lái)實(shí)現(xiàn)屏幕適配，這個(gè)方式不但可以進(jìn)行字體的適配還能實(shí)現(xiàn)不同界面顯示不同的樣式：
1：CSS中根據(jù)要求寫(xiě)不同的屏幕范圍，如下:
@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;" />
這里的各項(xiàng)參數(shù)所代表的意思可以另行百度。
這種方式跟android中通過(guò)多個(gè)drawable、layout、value文件夾各自編寫(xiě)XML界面的方式相同。
?
二、em和rem的使用
避免px單位的使用是個(gè)很重要的一點(diǎn)。這里用em和rem來(lái)代替px。
em：根據(jù)父標(biāo)簽的字體大小來(lái)設(shè)置當(dāng)前標(biāo)簽的寬高或字體大小。如：
<div id=”a”>
<div id=”b”></div>
</div>
如果給b設(shè)置字體大小為0.5em，則b的字體大小將會(huì)是a的一半。但是本人并不推薦大量使用em，因?yàn)檫@會(huì)讓你的計(jì)算變得困難。試想，當(dāng)多層嵌套時(shí)都使用em那最里面的字體將是最外層標(biāo)簽字體的幾分之幾呢？
rem：根據(jù)跟標(biāo)簽的字體大小來(lái)適配當(dāng)前標(biāo)簽的寬高或字體大小。
這個(gè)單位推薦使用，所謂的跟標(biāo)簽，對(duì)于html代碼來(lái)說(shuō)，自然就是最外層的<html>標(biāo)簽了。不管自己的html代碼有多少層的嵌套rem單位總是根據(jù)<html>標(biāo)簽字體來(lái)計(jì)算。
?
三、百分比的使用
要想屏幕適配的好，就多用百分比來(lái)作為寬高的值。這一般是用在css上。
?
四、絕對(duì)適配方案
不久前打開(kāi)QQ郵箱，發(fā)現(xiàn)一個(gè)現(xiàn)象，當(dāng)屏幕很小的時(shí)候QQ郵箱的字體就很小，當(dāng)瀏覽器不斷的拖大的過(guò)程中字體就好跟著慢慢變大。這讓我甚是驚奇，我也一直想實(shí)現(xiàn)這樣的一個(gè)屏幕適配方案。后來(lái)有了下面的方案，其實(shí)就是為了把這個(gè)方案分享出去才會(huì)有了這篇文章，說(shuō)起來(lái)也簡(jiǎn)單，在采用rem作為大小單位的同時(shí)通過(guò)js根據(jù)屏幕大小計(jì)算出一個(gè)合適的數(shù)值賦值給當(dāng)前的html即可。
在onLoad的時(shí)候執(zhí)行下面的代碼（后面的20根據(jù)自己的需要來(lái)改）
??????? var fontSize = $(window).width()/20;//屏幕的寬
??????? $("html").css("font-size",fontSize +"px");
這里是引用了jQuery，因而上面兩行代碼也是jquery的代碼。
純JS代碼可以這樣寫(xiě)：
var fontSize = document.body.clientWidth
var htmlElement = document.getElementsByTagName("html")[0];
htmlElement.style.fontSize=fontSize+”px”;
其實(shí)不難看出，就是拿當(dāng)前的屏幕尺寸去除一個(gè)數(shù)值，得到字體大小，進(jìn)而將這個(gè)字體大小賦值給heml跟節(jié)點(diǎn)（跟標(biāo)簽）即可，然后全文設(shè)置字體大小或控件大小時(shí)使用rem作為單位。也可以配合百分比設(shè)置控件大小。這樣一來(lái)基本上可以根據(jù)屏幕尺寸完美縮放自己的界面了。
總結(jié)
以上是生活随笔為你收集整理的Html5做webapp中界面适配的问题总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： validate+jquery+ajax
- 下一篇： css hack技术整理