xFace3.x 开发技巧（3）---移动应用常用的布局方式

2019独角兽企业重金招聘Python工程师标准>>>

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

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

转载于:https://my.oschina.net/u/1249251/blog/184680