最近用純html編寫html5應(yīng)用，發(fā)現(xiàn)離開引擎來寫那些比較cool的UI似乎有一定難度。不過好在目前網(wǎng)絡(luò)發(fā)達(dá)，掌握這些技能還是很快的。

但是，事實(shí)上使用過cocosjs以及白鷺引擎和layabox的我而言，實(shí)現(xiàn)這些非常簡單的UI以及實(shí)現(xiàn)過程操作還是很快的，不過到了引擎階段，這里的速度并沒有得到提升，相反速度下降了。思考過原因，使用引擎調(diào)節(jié)UI都是可見即可得，并不會考慮說要一步一步調(diào)節(jié)UI的位置，這于我們而言，簡直是一種煎熬。當(dāng)然對于手腳快速的人而言，一切都是那么簡單和急速！

這種感受，我在5年前深刻體會，使用php和java的區(qū)別。php作為一門腳本語言，其編寫速度之快，令人昨舌。比起java和其他的腳本語言，速度快了很多。今天我要說的就是Html5了。

對于很多寫頁面的人而言，似乎編寫網(wǎng)頁是那么痛苦的事情。當(dāng)然我在這里并不是說前端的不容易，事實(shí)上不論是客戶端還是前端，本質(zhì)上調(diào)節(jié)UI都是極其困難的，但是自從在引擎領(lǐng)域有了UI工具之后，編寫速度之快，讓人驚訝，現(xiàn)在早已經(jīng)習(xí)慣了這種方式，所以回歸到原始的html5的純代碼編寫UI,自然有一定的反思。

那么對于編寫web的童鞋而言，很多時候是不是希望我們的web應(yīng)用可以適配所有的平臺呢，其實(shí)對于很多開發(fā)內(nèi)部系統(tǒng)的人而言，只要支持簡單的pc即可，再高級一點(diǎn)支持移動設(shè)備即可，最高級的支持ipad以及其他的各種平板設(shè)備。對于開發(fā)面向普通用戶的產(chǎn)品而言，我們的web app必須滿足支持全部的平臺了，不論是移動設(shè)備還是pc web最好可以做到全部支持。從這一點(diǎn)而言，能夠?qū)崿F(xiàn)的方案有很多。這里稍微講解一點(diǎn)關(guān)于適配的知識。

第一點(diǎn)，我們可以為了適配簡單的機(jī)型，例如iphone 系列 以及 一般的安卓手機(jī)系列；不包括ipad 以及安卓平板。簡單地添加標(biāo)簽即可

這樣我們的web應(yīng)用就可以實(shí)現(xiàn)蘋果手機(jī)和安卓手機(jī)端的跨平臺了。

這種方式簡單，不過有效。這里的maximum-scale設(shè)置為1.3是有其原因的。

這是通過計(jì)算而來的，大多數(shù)的設(shè)備頁面都是以320px為基準(zhǔn)的布局，即使到iphone6的高寬比例是375/320 = 1.17，iphone6+的是414/320 = 1.29,所以也就差不多是1.3，當(dāng)然如果后面出現(xiàn)了比例更高的1.4,1.5,這里的maximum-scale也要變化。不過就效果而言，這種方式的適配并不是最好的，有時候會有一定的偏差，這種偏差在某些特殊的安卓機(jī)型上面會表現(xiàn)明顯，所以也不是推薦的類型。

第二點(diǎn)，我們可以媒介查詢方式。媒介查詢的方式，這種方案可以實(shí)現(xiàn)各種特殊方式地加載css，例如查詢到支持某個條件的，那么我們可以采用加載a.css;如果支持另外的條件，我們可以加載b.css,看起來效果也不錯。事實(shí)上這種響應(yīng)式的方案，在幾年之前比較流行，畢竟這種方案真的很牛叉，不論是多么奇特的機(jī)型，我都可以制作一個UI的css，那么UI自然就可以根據(jù)特定的css進(jìn)行展示了，效果可以說非常好，想法也非?？?。你來新的機(jī)型，我就處理新的方式，直到兼容絕大多數(shù)機(jī)型為止。

不過說句難聽的，即使可以支持很多機(jī)型，如果為了某個div或者位置的調(diào)節(jié)，我們兼容了四五套設(shè)備，寫了四五套css，這四五套css估計(jì)也是夠嗆。為了兼容這么多，得寫多少css。在工作中可以使用，但是不建議。

第三點(diǎn)，rem布局。對很多人而言，rem是什么，這是一個問題。這樣吧，我們可以這么簡單描述。如果我們的頁面已經(jīng)可以自適應(yīng)了，那么這個自適應(yīng)可能基于圖片也可能基于空白的頁面，但是不論怎們思考，我們的這個頁面一定是基于放縮式地自適應(yīng)背景的，自適應(yīng)于安卓設(shè)備，自適應(yīng)于手機(jī)設(shè)備，自適應(yīng)于ipad設(shè)備，自適應(yīng)于平板設(shè)備等等，這個自適應(yīng)簡單說就是大小適配到不同的設(shè)備大小。那么rem就是某個單位了，通過在頁面層獲取不同設(shè)備的屏幕分辨率和頁面大小，然后計(jì)算出符合不同平臺的一個rem值，這個rem因不同的設(shè)備而不同，從而可以適配到不同的設(shè)備上去。例如我們設(shè)計(jì)了絕對位置left:10rem,那么這個針對iphone的就是x1 px,針對ipad就是x2 px 針對華為平板就是x3 px可是我們看到不同的設(shè)備上的展現(xiàn)，三個設(shè)備絕對位置相對于設(shè)備頁面的位置基本不變化，這就是rem布局的奧秘。當(dāng)然rem布局本身就要求我們的背景頁面一定要自適應(yīng)的而不是定死不變化的，如果在這種情況下使用rem那么絕對位置相對設(shè)備的頁面的位置就會產(chǎn)生變化，因此這個時候的rem意義不大。

如果有需要，可以自己查詢lib-flexible，個人表示該庫不錯。當(dāng)然我們在這里也要熟悉flex布局，也就是彈性布局。下篇講說彈性布局。