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来重构依赖于浏览器或者其余设备(手机、平板电脑、电视等)窗口大小的网页的行为。
• 是为了响应不一样用户使用不一样屏幕尺寸的设备、不一样平台、不一样方向进行浏览网页时，页面能够自动适应的需求。
  

也就是说，无论用户使用的是电脑仍是手机，平板电脑仍是电视机；也无论用户是垂直仍是水平使用设备，页面布局均可以自动适应，不会出现变形、偏移或者消失不可见等问题。