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

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

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

Android中常用的4大布局方式

 Android中常用的4大布局方式: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从屏幕左上方布局组件。 ...
  • qq604262286
  • qq604262286
  • 2016年05月02日 21:18
  • 662

HTML与CSS布局技巧总结

很多人对CSS的布局有困惑,实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些...
  • bingkingboy
  • bingkingboy
  • 2016年04月11日 00:29
  • 14824

浅谈几种常用的布局方式

目前针对web前端页面的设计主要分为pc端和移动端页面,针对不同的页面我们可能会采取不同的布局格式,在整个布局的选择上,没有一成不变的,也没有任何一种布局能够满足各个方面的需要,在众多的布局方式中,我...
  • gj1949
  • gj1949
  • 2016年11月28日 16:13
  • 3757

CSS各种常用布局

三列布局自适应,高度占满 注意高度占满用100%时要对html和body先设置height:100%;因为每个元素的100%都是取决于父元素相同属性值。 宽度自适可以使用flex或width使用33....
  • mzzzzq
  • mzzzzq
  • 2016年04月22日 11:17
  • 2687

iOS 布局方式汇总

作为iOS UI开发人员,为了适配多种机型以及横竖屏,【布局】的概念是再熟悉不过的,iOS的布局发展到今天主要有以下几种方式:...
  • forwardto9
  • forwardto9
  • 2016年10月17日 15:27
  • 774

常见的几种页面布局方式

1.固定布局(最基本的布局) 固定布局 *{ margin: 0; padding: 0; } html,body{ width:100% ; height: 100%; } .fixed...
  • DavidLog
  • DavidLog
  • 2017年04月26日 01:46
  • 2219

Android中常用的5大布局详述

Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列,就组成了用户所看见的界面。              所有的布局方式都可以...
  • q610098308
  • q610098308
  • 2015年11月19日 16:58
  • 2087

android开发中常用的五大布局

线性布局 线性布局在xml文件中使用来定义。  线性布局可以分为水平和垂直方向的布局,可以 通过android:orientation来定义方向, android:orientation=“ho...
  • u012301501
  • u012301501
  • 2016年12月04日 21:09
  • 939

Android开发——布局性能优化的一些技巧(一)

0. 前言上一篇我们分析了为什么LinearLayout会比RelativeLayout性能更高,意义在于分析了这两种布局的实现源码,算是对一个小结论的证明过程,但是对布局性能的优化效果,对这两种布局...
  • SEU_Calvin
  • SEU_Calvin
  • 2016年11月28日 21:55
  • 1627

布局优化技巧笔记

在实际开发中如何尽可能的减少层级、减少控件数量,并达到同样的视觉效果?本文记录开发过程中的实践。...
  • zhaizu
  • zhaizu
  • 2016年01月22日 16:14
  • 2093
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:xFace3.x 开发技巧(3)---移动应用常用的布局方式
举报原因:
原因补充:

(最多只允许输入30个字)