xFace3.x 開發技巧（3）---移動應用經常使用的佈局方式

移動應用經常使用的佈局方式
（1）固定佈局: 針對具體分辨率進行佈局，通常web上經常使用，移動開發上不建議採用此種方式。
（2）流式佈局（使用彈性盒模型）: 通常分爲header區、content區、footer區，採用上中下百分比(有時也固定header和footer高度)進行佈局。
（3）響應佈局: 經過css3引入的@media ，根據不一樣的分辨率作出不一樣的佈局樣式調整。
固定佈局
固定佈局(Fixed Layout)使用固定寬度的包裹層(Wrapper), 內部的各個部分可使用百分比或者固定的寬度來表示。
這裏最重要的是, 外面的所謂包裹層(或稱爲容器)的寬度是固定不變的, 因此不論訪問者的瀏覽器是什麼分辨率, 他們看到的網頁寬度都彼此相同。
流式佈局（彈性盒模型）
流式佈局（fluid layout）就是一個根據屏幕的尺寸可自行改變位置以取得相對定位的一種佈局方式。
這種佈局方式相對於定位佈局來講，對瀏覽器的渲染負擔更小(在ios上，當一個頁面有大量定位佈局的元素時有引發崩潰的可能）。

• 彈性盒模型
  

說到流式佈局，咱們就不得不提到彈性盒模型。這是目前實現流式佈局最基本的工具。
相對於傳統佈局手段，彈性盒模型具備諸多優勢，好比：
（1）不須要使用float等屬性來定義橫向佈局元素。
（2）對居中定位且不肯定寬高的元素很方便（不須要額外的js來臨時計算）。
（3）對於不肯定寬高的頁面可使用自動填充的規則平分剩餘空間，並能夠設置固定部分和自適應部分一塊兒使用，適應屏幕不一樣的分辨率。
（4）對於設定100%寬度帶border屬性的元素能夠自適應(-webkit-box-sizing:border-box)，避免帶邊框的盒子寬度100%時溢出 。
響應佈局
響應佈局(responsive layout)：

• 是一種有別於傳統的固定佈局(fixed layout)和流體佈局(fluid layout)的網頁佈局。
• 是一種利用CSS3 media queries來重構依賴於瀏覽器或者其餘設備(手機、平板電腦、電視等)窗口大小的網頁的行爲。
• 是爲了響應不一樣用戶使用不一樣屏幕尺寸的設備、不一樣平臺、不一樣方向進行瀏覽網頁時，頁面能夠自動適應的需求。
  

也就是說，無論用戶使用的是電腦仍是手機，平板電腦仍是電視機；也無論用戶是垂直仍是水平使用設備，頁面佈局均可以自動適應，不會出現變形、偏移或者消失不可見等問題。