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

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

相关文章推荐

xFace3.x 开发技巧(1)---从web开发转向移动开发

介绍一些针对移动设备常用的HTML5开发技巧。 从web开发转向移动开发视野范围的转变 这点是针对可显示的内容区域而言的,PC的内容区域相对于移动设备的内容区域来说,那已经算相当丰富了。如...

ionic3框架开发之-SRM移动应用之通讯录开发

前言 由于之前做的SRM移动应用采用的是ionic1.x框架进行开发的,由于性能方便的诟病,导致用户体验不是很友好,于是想着怎么样去提高应用的性能问题。此时刚好ionic3.x框架已发布,由于ion...
  • bo5741
  • bo5741
  • 2017年07月27日 09:14
  • 439

微信开放平台开发(3) 移动应用微信登录

在这篇微信公众平台开发教程中,我们将介绍如何使用微信开放平台接口实现移动应用微信登录的功能。 移动应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。在进行微信OAuth...
  • txw1958
  • txw1958
  • 2016年04月15日 18:38
  • 10473

ionic3框架开发-SRM移动应用之待办事项模块

前言 对于使用angular开发的攻程师们来说,升级是一件非常痛苦的事情。AngularJS最大版本号只有1.x,2.x/4.x的版本号都是针对于全新的框架Angular,不向后兼容导致要花费大量的...
  • bo5741
  • bo5741
  • 2017年07月29日 17:05
  • 261

用Flex开发移动应用(3)---- 在桌面和移动设备上测试

在桌面上测试 1、确保主MXML(HelloWorld.mxml)在编辑器里是活动的。 2、点击Run 3、确保target platform是Android 4、启动方法选择“在桌面上”...
  • zz962
  • zz962
  • 2011年10月12日 17:25
  • 939

主流移动应用开发框架(3)——ViewPagerIndicator+3DViewpager

今天向大家介绍下第三个开发框架——多样化的ViewPager指示器及其3DViewPager效果。 (一)ViewPager指示器——ViewPagerIndicator 网易新闻的app使用...

移动应用界面设计3(ToDoList案例)

  • 2014年10月08日 14:33
  • 801KB
  • 下载

移动应用市场2012年3大趋势:HTML5日渐成熟

北京时间12月20日消息,据国外媒体报道,随着智能手机和平板电脑渗透率的不断提高,移动应用市场日渐发展壮大,这个市场在2012呈现出了3个最重要的发展趋势:HTML5日渐成熟、位置服务在移动领域获得更...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:xFace3.x 开发技巧(3)---移动应用常用的布局方式
举报原因:
原因补充:

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