hth华体会体育APP跨平台多终端设备网页自适应布局研究及应用doc
发布时间:2022-11-30 16:03

  hth华体会体育综合体育APP官网下载跨平台多终端设备网页自适应布局研究及应用 摘要:文章分析了目前跨平台响应式布局的研究现状,针对其存在的问题提出了一种新的跨平台响应式布局模式,即Flexbox(弹性盒子模型)+Media Queries(媒体查询)技术组合,并首次尝试绘制出较为合理的客户端分辨率适配表。最后通过“农民工技能培训与综合服务平台”详细阐述了该响应式布局模式的开发过程,并验证了可行性与效果。 关键词:跨平台;弹性盒子模型;网页自适应;农民工技能培训;应用研究 中图分类号:G40-057 文献标识码:A 论文编号:1009-8097(2015)02-0107-07 引言 随着互联网技术的迅猛发展,互联网终端设备从个人电脑到平板电脑、智能手机,平台越来越多,浏览器的屏幕尺寸千差万别。这种情况给网页开发者提出了更高的要求,同样的内容,要在平台不同、大小迥异的屏幕上都拥有很好的用户体验并非易事。 现有的跨平台响应式布局技术存在以下问题: (1)布局基于块(从上到下)和内联流(从左到右)方向,针对大型或者复杂的应用程序(特别是当它涉及到取向改变、缩放、拉伸和收缩等)就缺乏灵活性; (2)容器只能让其子项目改变宽度与高度,不能改变顺序,因此无法以最佳方式填充可用空间,造成有限空间的浪费。 针对已有响应式布局技术存在的问题,本文提出一种新的跨平台响应式布局模式,并绘制出较为合理的客户端分辨率适配表,探讨了面向多终端设备的网页自适应布局解决方案。文章首先概述了弹性盒子模型及特征;其次梳理了基于Flexbox的响应式布局的设计流程;最后以“农民工技能培训与综合服务平台”为例来验证Flexbox的响应式布局效果。 一 Flexbox弹性盒子模型及特征 1弹性盒子模型理论 盒子模型(Box Model)是级联样式表(Cascading Style Sheet,CSS)的核心,其属性包括:内容(content)、填充(padding)、边框(border)、边界(margin)。盒子模型有两种类型,分别是IE盒子模型和标准W3C(浏览器内核为WebKit)盒子模型,目前移动设备上的浏览器内核均为WebKit。 W3C在CSS3(CSS的第三个版本)中引入了新的盒子模型――弹性??子模型(Flexible Box Model),该模型采用新的布局机制。这种机制与传统的CSS盒子模型布局有很大的区别:CSS盒子模型布局通过内容决定父容器大小,而CSS3弹性盒子模型布局在指定大小的父盒子里来为子盒子分配空间。 2弹性盒子模型实例“Flexbox”特征 Flexbox由伸缩容器(父元素)和伸缩项目(子元素)组成。通过设置元素的display属性为flex或inline-flex可以得到一个伸缩容器,伸缩容器中的每一个子元素都是一个伸缩项目。 常规布局是基于块和内联流方向,而Flex布局是基于flex-flow流。来自W3C规范中的这张图,解释了Flex布局的主要思想。 如图1所示,Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小他们以防止溢出容器。基本上,伸缩项目是沿着主轴(main axis),从主轴起点(main-start)到主轴终点(main-end)或者沿着侧轴(cross axis),从侧轴起点(cross-start)到侧轴终点(cross-end)排列。根据伸缩项目排列方式不同,主轴和侧轴方向也有所变化。 二 基于Flexbox的响应式布局设计 响应式Web设计(Response Web Design)是由Ethan Marcotte提出的,其实质是针对任意设备对网页内容进行完美布局的一种显示机制。 基于Flexbox的响应式布局设计思路如下:首先绘制出客户端分辨率适配表,以此作为网页布局中部分元素大小的参照标准;然后制作出网页整体布局原型;最后运用Flexbox+Media Queries技术实现响应式布局。 1面向多类型终端的分辨率适配方法 客户端分辨率适配,其核心在于计算出不同显示器上拥有最好用户体验的一个字号大小,而Logo大小、hth华体会体育APP行高、按钮大小、图标尺寸、文本间距等都以该字号大小的相对比值(单位为em)来定义。该字号大小的计算方法如图2所示: 下面,需要制作出详细的客户端分辨率适配表,以便后期实际开发参考。 第一步:统计用户不同平台的终端设备的主流分辨率和对应屏幕大小 通过从CNZZ数据专家(全球最大的中文互联网数据统计分析服务提供商)中进行查询,得到针对不同的分辨率其可能的屏幕尺寸范围数值,并确定该分辨率下的主流屏幕尺寸。若某一分辨率下不同型号的屏幕尺寸分布较为平均,则通过计算屏幕尺寸的最大值和最小值的算术平均值作为主流屏幕尺寸。 第二步:计算每个分辨率主流屏幕尺寸的物理宽度 已知屏幕对角线长度、长宽分辨率,按照勾股定理,再加之单位换算关系1英寸=2.54厘米,可以很轻松地算出屏幕的物理长度和宽度。 第三步:计算不同显示器上的字号大小 用屏幕的物理宽度除以像素宽度,就可以得到每个像素的宽度。然后用指定的文字物理大小(正常情况下,PC终端上显示物理宽度为4.23mm、平板电脑上显示2.81mm、手机屏幕上显示1.58mm见方大小的文字对于人眼来说是最舒适的)除以这个数,就可以得到在不同分辨率下所需的字号。特别提出的是:一些中文字体在非偶数字号下的显示效果欠佳,所以针对某个屏幕分辨率,选择离它最近的偶数字号作为最终的参考值。 第四步:根据换算对照表得到其他元素的大小 根据客户端分辨率适配的设计原理,其他元素的大小都以这个参考量的相对比值来定义。表1是最终的客户端分辨率适配表(1-4行PC端,5、6行智能手机端,7-9行平板电脑端): 2面向多终端设备的页面整体布局方法 目前,响应式Web设计并没有通用的界面布局模型。下面按照以下流程设计出符合“农民工技能培训与综合服务平台”其特点的页面整体布局模型。hth华体会体育APP 第一步:确定需要兼容的设备类型、屏幕尺寸 PC:17寸1280*1024;平板电脑:8.0寸768*1024;智能手机:3.2寸320*480。 选定设备类型及相应屏幕尺寸后,查看客户端分辨率适配表,确定其设备对应的文字、Logo、图标、按钮行高、文本间距等值,为制作线框原型做准备。 第二步:制作线框原型 针对确定下来的几个尺寸分别制作不同的线框原型,需要考虑清楚不同尺寸下,页面的布局如何变化,内容尺寸如何缩放,功能、内容的删减,甚至针对特殊的环境作特殊化的设计等。 3页面局部元素响应式布局方法 在完成页面的整体布局模型后,需要对页面各个区域中的元素进行布局。使用弹性盒子模型,将使这方面布局工作的难度降低很多。这里以网页中部的图文混排模块为例,展示如何运用HTML5+CSS3,并结合Flexbox+Media Queries技术实现响应式Web设计。 (1)HTML结构 为了结构的清晰,这个示例仅使用了简单的HTML结构,实际开发中标签中间还需添加图片和文字标签。 (2)CSS代码 通过设置container的display属性为flex,使得main标签成为一个伸缩容器,在伸缩容器中的所有子元素都会自动变成伸缩项目。flex-flow:row wrap表示伸缩项目排列由左向右排列且当伸缩项目在伸缩容器中无法在一行中显示的时候会另起一行排列。 (3)Media Queries条件 这里设置了三个响应式断点:窄屏、中屏和宽屏。每个断点都有最大屏幕宽度或最小屏幕宽度的限制,具体的数值可以由开发者视情况而定。 (4)示例效果 运用HTML5+CSS3,并结合Flexbox+Media Queries技术,使图文混排模块实现以下效果。 三 跨平台的多终端设备网页自适应布局应用 “农民工技能培训与综合服务平台”是一个为广大农民工提供各种专业技能培训的服务平台,该平台采用Flexbox新语法、旧语法和中间过渡语法混合使用的方式。 下面是Resoonsinator和Responsivator工具对本系统的在线显示的是Windows PC、IOS平板以及Android智能手机的网页布局效果,可以看出三种不同平台的终端设备对系统的支持度是比较高的,(左1为Windows PC、左2为IOS平板、左3为Android智能手机);图9显示的是Android平台、IOS平台的不同屏幕尺寸的移动终端设备呈现出的网页布局效果,可以看出同一平台下的终端设备屏幕尺寸不同,其呈现的网页布局也实现了很好的自适应性,(左1为width=384px的Android智能手机、左2为width=600px的Android智能手机、左3为width=768px的IOS平板、左4为width=1024px的IOS平板)。 四 总结 本文针对已有响应???布局技术存在的问题,提出了一种新的跨平台响应式布局模式,即Flexbox+Media Queries技术组合,并首次尝试绘制出较为合理的客户端分辨率适配表。最后通过“农民工技能培训与综合服务平台”来验证其可行性与效果。但由于所掌握的技术程度有限,尚存在一些不足与问题,这也是在今后的研究中,应该继续研究的范围。 1浏览器兼容性。虽然Flexbox功能强大(特别是弹性布局),但很多开发者仍然不敢使用,其主要原因出于它的语法版本众多,浏览器对其兼容性情况比较复杂。若想让浏览器得到完美展示,hth华体会体育APP往往需要新旧语法混合使用,不仅增加了代码数量,还提高了开发者对语法的要求。 2用户体验有待提高。由于开发者采用Flexbox+Media Queries技术组合来实现不同终端设备的网页布局,因此个人电脑、智能手机、平板电脑等会呈现不同的网页布局,这样有可能导致用户在使用过程中产生误解或者操作错误。同时,也无法兼顾各平台都拥有最好的用户体验,如手机具有屏幕小,输入的效率限制,网络传输速度慢等局限性,但是开发者往往无法只考虑智能手机平台的布局特点。 编辑:小西