移動應用開發之自適應佈局與單位（px、em）選擇

• 移動應用開發中自適應佈局是很是重要的，由於不一樣設備分辨率不同，大小也不同，不採用自適應佈局在不一樣的設備中顯示會出現各類問題
• 可以起到自適應佈局的方法
  • CSS3中的自適應佈局
    • 百分比佈局法：即大小，位置，邊距等用百分比來限制，可以在不一樣的設備中佔據整體的佈局一致
    • webkit-box結合-webkit-box-flex佈局法：使用webkit-box可以實現彈性盒子模式佈局，結合-webkit-box-flex可以實現將屏幕徹底分割的佈局，與半分比不一樣的是：百分比佈局在存在border的時候很差控制，由於若是整體是100%，再加上border就會超過整體值，固然也能夠在使用百分比的基礎上加上box-sizing:border-box將border設置爲佔用內部空間來解決這個問題，可是如今主流的佈局仍是使用webkit-box
    • 媒體查詢佈局法：@media screen and (max-width:400px),採用媒體查詢法定義不一樣型號設備使用的樣式，給每種尺寸的設備分別定義樣式，這種方法有必定的做用，可是在Android設備愈加混亂的市場情況下，設備尺寸愈來愈繁雜，不適合總體靠媒體查詢來實現自適應佈局
  • JS中動態實現自適應佈局
    • 經過JS獲取屏幕大小，通過計算動態建立佈局，這種方式太複雜，並且在移動端影響體驗，基本被拋棄
    • 監聽resize事件與oritationchange事件實如今設備狀態發生改變時對應佈局的改變

• Android中的自適應機制

　　　　Android中一般採用dp與sp爲單位進行佈局，由於採用這兩個單位會根據設備分辨率進行自動縮放，默認將設備寬度都定義爲360dp

• Hybrid App開發工具中的佈局

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

• • 首先須要viewport支持，這種設置方式在Appcan、HBuilder、apicloud中都支持，針對此種設計方法有哪些自適應佈局方法？
    • 頁面在webview中的顯示原理：頁面在webview中的真實大小通常是360，而後將其拉昇到響應的分辨率，所以html在webview中的線條是那麼的粗，看上去就明顯不是1px，那是由於最終顯示是通過放大後的，並非一個物理像素，一般是1.5或者2個物理像素，所以整個界面看上去是那麼的粗，不夠精緻，圖片也是放大後的，可能會出現模糊現象
    • 這種佈局特色：
      • px：不一樣尺寸不一樣分辨率中px一樣px值大小是同樣的，便是固定大小
      • em：根據字體設置大小來顯示，對於不一樣分辨率的設備來講是不同大的，便是可縮放大小嗎，與dp和sp相似，建議不居中採用該單位進行佈局
  • 精細化佈局方式
    • 首先研究原理，在Android中1px並非1物理像素，而是通過放大後的，可是在IOS中倒是真實的1物理像素，這樣使得應用在IOS中看上去效果要好的多，這是爲何？
      • IOS中的UIWebview會識別html5中viewport中的width屬性，根據width屬性來改變設備的分辨率與物理像素比例
      • Android中相對的屬性是target-densitydpi，可是在Android4.4之後就廢棄了這個屬性，也就是說使用4.4之後的Android SDK 打包就不能支持該屬性
  • 在apicloud中，編譯環境採用的是4.4以上的Android SDK,即不支持target-densitydpi屬性，不可以使整個應用精細化，不少人千方百計實現1px線條，經過:after或:before來添加一個1px的div，而後對div進行縮放，實現真實1px線條，可是這樣作太繁瑣，並且解決不了圓角的問題，其餘地方都變成1px了，按鈕卻仍是粗border，這樣更加影響體驗
  • HBuilder在最初採用的是API20環境打包的，也不支持該屬性，可是最近改爲了API19，實現了對於該屬性的支持，可見雖然Android官方廢除了，可是其做用仍然很大
  • Appcan一直以來都是使用的4.4如下的Android SDK環境打包的，所以一直支持該屬性，有人曾經說過Appcan用的是Android2.3的引擎，apicloud用的是4.4之後的引擎，所以apicloud比Appcan速度更加快，這些只是那些不懂的人才會說的，現現在Appcan的速度卻等同於甚至高於apicloud怎麼解釋？看我發的測試隨筆就知道

• 建議：
  • 使用HBuilder與Appcan的開發人員頁面中必定要加上

  • <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    來顯示精緻化界面，在佈局中採用em來佈局，由於這樣設置後px在不一樣分辨率下獲得的效果是不同的

  • 在apicloud中佈局使用px與em在不一樣設備上真實差距不是很大
  • 也但願apicloud可以適配target-densitydpi屬性的支持，而不要像論壇版主問他爲何放棄使用該屬性，就說Android不支持了，HTML5定稿中廢棄了該屬性，說我鑽牛角尖，既然別人能用，你爲何不能用，廢棄並不表明不能夠用，Android中廢棄的方法多了去了，有的方法還不是照樣使用