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

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

移动应用常用的布局方式

(1)固定布局: 针对具体分辨率进行布局,一般web上常用,移动开发上不建议采用此种方式。 (2)流式布局(使用弹性盒模型): 一般分为header区、content区、footer区,采用上中下百...
  • ljh_best
  • ljh_best
  • 2014-05-12 13:45:11
  • 506

构建HTML5移动应用的十个技巧

《构建HTML5移动应用的十个技巧》原文见:http://www.fromdev.com/2015/02/building-html5-mobile-apps.html用HTML5构建移动应用可以让有...
  • chszs
  • chszs
  • 2015-02-27 13:36:30
  • 2125

css的3种布局方式

1.文档流布局方式,这是最基本的布局方式,就是按照文档顺序一个一个地显示,块元素独占一行,内联元素共享一行。 2.浮动布局方式,某个元素浮动之后,其后面的元素就当其不存在而占用其原来的地方,按照原来文...
  • xxssyyyyssxx
  • xxssyyyyssxx
  • 2015-10-14 20:18:02
  • 2992

浅谈几种常用的布局方式

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

常见的几种页面布局方式

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

常见的几种页面内容布局方式

常见的页面布局,左右自适应布局
  • wang839305939
  • wang839305939
  • 2017-07-27 11:45:44
  • 541

CSS各种常用布局

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

浅谈Android中常用的五种布局方式

本篇文章所提到的控件指:控件和布局 布局的继承关系:LinearLayout,RelativeLayout,FrameLayout,AbsoluteLayout都是ViewGroup的子类,所以有些...
  • chen364567628
  • chen364567628
  • 2016-09-19 21:17:21
  • 3504

移动端布局浅谈

最近做了几个移动端的项目,虽然以前也为写移动网页做过了一些准备,但第一次接触移动端的布局,所以踩了几个坑,趁着放假查阅下相关资料,顺道做个总结,也好给以后的自己做个交代 在移动端页面上最害怕遇到一...
  • u014071104
  • u014071104
  • 2015-09-05 17:52:51
  • 3190

Android中常用的5大布局详述

Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列,就组成了用户所看见的界面。              所有的布局方式都可以...
  • q610098308
  • q610098308
  • 2015-11-19 16:58:23
  • 2486
收藏助手
不良信息举报
您举报文章:xFace3.x 开发技巧(3)---移动应用常用的布局方式
举报原因:
原因补充:

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