跨平台的多终端设备网页自适应布局研究及应用*——以农民工技能培训与综合服务平台为例

刘清堂 胡 舰 翟利利 黄景修

（华中师范大学 教育信息技术学院，湖北武汉430079）

引言

随着互联网技术的迅猛发展，互联网终端设备从个人电脑到平板电脑、智能手机，平台越来越多，浏览器的屏幕尺寸千差万别[1]。这种情况给网页开发者提出了更高的要求，同样的内容，要在平台不同、大小迥异的屏幕上都拥有很好的用户体验并非易事。

现有的跨平台响应式布局技术存在以下问题：

（1）布局基于块（从上到下）和内联流（从左到右）方向，针对大型或者复杂的应用程序（特别是当它涉及到取向改变、缩放、拉伸和收缩等）就缺乏灵活性；

（2）容器只能让其子项目改变宽度与高度，不能改变顺序，因此无法以最佳方式填充可用空间，造成有限空间的浪费。

针对已有响应式布局技术存在的问题，本文提出一种新的跨平台响应式布局模式，并绘制出较为合理的客户端分辨率适配表，探讨了面向多终端设备的网页自适应布局解决方案。文章首先概述了弹性盒子模型及特征；其次梳理了基于Flexbox的响应式布局的设计流程；最后以“农民工技能培训与综合服务平台”为例来验证Flexbox的响应式布局效果。

一 Flexbox弹性盒子模型及特征

1 弹性盒子模型理论

盒子模型（Box Model）是级联样式表（Cascading Style Sheet，CSS）的核心，其属性包括：内容（content）、填充（padding）、边框（border）、边界（margin）[2]。盒子模型有两种类型，分别是IE盒子模型和标准W3C（浏览器内核为WebKit）盒子模型，目前移动设备上的浏览器内核均为WebKit。

W3C在CSS3（CSS的第三个版本）中引入了新的盒子模型——弹性盒子模型（Flexible Box Model），该模型采用新的布局机制。这种机制与传统的CSS盒子模型布局有很大的区别：CSS盒子模型布局通过内容决定父容器大小，而CSS3弹性盒子模型布局在指定大小的父盒子里来为子盒子分配空间[3]。

2 弹性盒子模型实例“Flexbox”特征

Flexbox由伸缩容器（父元素）和伸缩项目（子元素）组成。通过设置元素的display属性为flex或inline-flex可以得到一个伸缩容器，伸缩容器中的每一个子元素都是一个伸缩项目。

常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流。来自W3C规范中的这张图，解释了Flex布局的主要思想。

图1 Flex布局思想[4]

如图1所示，Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器[5]。基本上，伸缩项目是沿着主轴（main axis），从主轴起点（main-start）到主轴终点（main-end）或者沿着侧轴（cross axis），从侧轴起点（cross-start）到侧轴终点（cross-end）排列。根据伸缩项目排列方式不同，主轴和侧轴方向也有所变化。

二 基于Flexbox的响应式布局设计

响应式Web设计（Response Web Design）是由Ethan Marcotte[6]提出的，其实质是针对任意设备对网页内容进行完美布局的一种显示机制。

基于Flexbox的响应式布局设计思路如下：首先绘制出客户端分辨率适配表，以此作为网页布局中部分元素大小的参照标准；然后制作出网页整体布局原型；最后运用Flexbox+Media Queries技术实现响应式布局。

1 面向多类型终端的分辨率适配方法

客户端分辨率适配，其核心在于计算出不同显示器上拥有最好用户体验的一个字号大小，而Logo大小、行高、按钮大小、图标尺寸、文本间距等都以该字号大小的相对比值（单位为em）来定义。该字号大小的计算方法如图2所示：

图2 不同分辨率下所需字号计算方法

下面，需要制作出详细的客户端分辨率适配表，以便后期实际开发参考。

第一步：统计用户不同平台的终端设备的主流分辨率和对应屏幕大小

通过从CNZZ数据专家（全球最大的中文互联网数据统计分析服务提供商）中进行查询，得到针对不同的分辨率其可能的屏幕尺寸范围数值，并确定该分辨率下的主流屏幕尺寸。若某一分辨率下不同型号的屏幕尺寸分布较为平均，则通过计算屏幕尺寸的最大值和最小值的算术平均值作为主流屏幕尺寸。

第二步：计算每个分辨率主流屏幕尺寸的物理宽度

已知屏幕对角线长度、长宽分辨率，按照勾股定理，再加之单位换算关系1英寸=2.54厘米，可以很轻松地算出屏幕的物理长度和宽度。

用屏幕的物理宽度除以像素宽度，就可以得到每个像素的宽度。然后用指定的文字物理大小（正常情况下，PC终端上显示物理宽度为4.23mm、平板电脑上显示2.81mm、手机屏幕上显示1.58mm见方大小的文字对于人眼来说是最舒适的）除以这个数，就可以得到在不同分辨率下所需的字号。特别提出的是：一些中文字体在非偶数字号下的显示效果欠佳，所以针对某个屏幕分辨率，选择离它最近的偶数字号作为最终的参考值。

第四步：根据换算对照表得到其他元素的大小

根据客户端分辨率适配的设计原理，其他元素的大小都以这个参考量的相对比值来定义[7]。表1是最终的客户端分辨率适配表（1—4行PC端，5、6行智能手机端，7—9行平板电脑端）：

表1 客户端分辨率适配表

2 面向多终端设备的页面整体布局方法

目前，响应式Web设计并没有通用的界面布局模型。下面按照以下流程设计出符合“农民工技能培训与综合服务平台”其特点的页面整体布局模型。

第一步：确定需要兼容的设备类型、屏幕尺寸

PC：17寸 1280*1024；平板电脑：8.0寸768*1024；智能手机：3.2寸 320*480。

选定设备类型及相应屏幕尺寸后，查看客户端分辨率适配表，确定其设备对应的文字、Logo、图标、按钮行高、文本间距等值，为制作线框原型做准备。

本文提出利用再制造胶粘修复技术对工程机械中含有表面疲劳裂纹的损伤结构进行再制造修复。这项技术采用力学性能强的复合材料补片，通过环氧结构的胶粘剂将补片胶粘于含有裂纹的损伤结构表面，建立损伤结构-胶粘剂-复合材料补片三者为一体的再制造修复结构。再制造修复通过胶层中的胶粘界面将损伤结构承受的一部分载荷传递给补片，以此缓解损伤结构裂纹尖端的应力集中，延缓裂纹生长，使其扩展趋势放缓。形成再制造修复结构以后，整体结构强度和承载能力均获得明显提升，工作寿命周期得以延长。

第二步：制作线框原型

针对确定下来的几个尺寸分别制作不同的线框原型，需要考虑清楚不同尺寸下，页面的布局如何变化，内容尺寸如何缩放，功能、内容的删减，甚至针对特殊的环境作特殊化的设计等[8]。

图3 农民工技能培训与综合服务平台的PC、平板电脑、智能手机端网页布局线框原型

3 页面局部元素响应式布局方法

在完成页面的整体布局模型后，需要对页面各个区域中的元素进行布局。使用弹性盒子模型，将使这方面布局工作的难度降低很多。这里以网页中部的图文混排模块为例，展示如何运用HTML5+CSS3，并结合Flexbox+Media Queries技术实现响应式Web设计。

（1）HTML结构

图4 图文混排模块的HTML结构

为了结构的清晰，这个示例仅使用了简单的HTML结构，实际开发中标签中间还需添加图片和文字标签。

（2）CSS代码

通过设置container的display属性为flex，使得main标签成为一个伸缩容器，在伸缩容器中的所有子元素都会自动变成伸缩项目。flex-flow：row wrap表示伸缩项目排列由左向右排列且当伸缩项目在伸缩容器中无法在一行中显示的时候会另起一行排列。

图5 图文混排模块的CSS代码

（3）Media Queries条件[9]

图6 图文混排模块的Media Queries条件

这里设置了三个响应式断点：窄屏、中屏和宽屏。每个断点都有最大屏幕宽度或最小屏幕宽度的限制，具体的数值可以由开发者视情况而定。

（4）示例效果

运用HTML5+CSS3，并结合Flexbox+Media Queries技术，使图文混排模块实现以下效果。

图7 图文混排模块的示例效果（按Media Queries设置的断点顺序）

三 跨平台的多终端设备网页自适应布局应用

“农民工技能培训与综合服务平台”是一个为广大农民工提供各种专业技能培训的服务平台，该平台采用Flexbox新语法、旧语法和中间过渡语法混合使用的方式。

下面是Responsinator和Responsivator工具对本系统的在线测试结果。

图8显示的是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平板）。

图8 测试效果图

图9 测试效果图

四 总结

本文针对已有响应式布局技术存在的问题，提出了一种新的跨平台响应式布局模式，即Flexbox+Media Queries技术组合，并首次尝试绘制出较为合理的客户端分辨率适配表。最后通过“农民工技能培训与综合服务平台”来验证其可行性与效果。但由于所掌握的技术程度有限，尚存在一些不足与问题，这也是在今后的研究中，应该继续研究的范围。

1浏览器兼容性。虽然Flexbox功能强大（特别是弹性布局），但很多开发者仍然不敢使用，其主要原因出于它的语法版本众多，浏览器对其兼容性情况比较复杂。若想让浏览器得到完美展示，往往需要新旧语法混合使用，不仅增加了代码数量，还提高了开发者对语法的要求。

2用户体验有待提高。由于开发者采用Flexbox+Media Queries技术组合来实现不同终端设备的网页布局，因此个人电脑、智能手机、平板电脑等会呈现不同的网页布局，这样有可能导致用户在使用过程中产生误解或者操作错误。同时，也无法兼顾各平台都拥有最好的用户体验，如手机具有屏幕小，输入的效率限制，网络传输速度慢等局限性[10]，但是开发者往往无法只考虑智能手机平台的布局特点。

[1]冉兆春.浅析对不同分辨率屏幕自动调节的网页设计方法[J].计算机光盘软件与应用,2013,(3):212-214.

[2]殷卫莉.基于CSS盒子模型的margin属性解析[J].扬州教育学院学报,2009,(27):28-31.

[3]林文如,林文忠,刘镭.基于弹性盒子模型的跨平台手机应用界面布局[J].苏州大学学报,2012,(5):22-26.

[4]万维网联盟.W3C标准[OL].

[5]Chris Coyier.AComplete Guide to Flexbox[OL].

[6]崔松健.响应式Web设计[J].信息与电脑,2013,(10):25-26.

[7]周俊杰.网页视觉设计规范[OL].

[8]杨叶,陈琳,董启标.响应式Web移动学习资源的技术实现与设计研究[J].现代教育技术,2013,23(6):107-111.

[9]刘欢,卢蓓蓉.使用响应式设计构建高校新型门户网站[J].中国教育信息化,2013,(9):71-74.

[10]马志强,蒋晓.基于用户体验的智能手机网站界面设计探讨[J].包装工程,2012,(16):63-66.