基于HTML 5+CSS3+jQuery的响应式布局网页设计

2018-07-27叶潮流马林山

梧州学院学报 2018年3期

叶潮流，马林山

(1.合肥学院管理系，安徽合肥 230601；2.合肥学院图书馆，安徽合肥 230601)

0引言

响应式布局[1]是由WebApp开发研究发展而来的一种网页布局解决方案，其目的是兼容多种终端的不同屏宽尺寸、像素比以及屏幕的旋转取向，动态调整页面布局(元素位置和大小)，选择性地显示页面内容，达到最佳视觉展示效果。众所周知，网页布局外在表现为版块的形式美感，内在表现为结构的技术模式，外在版块的整体美感带来的用户体验[2]最终依赖于内在结构技术模式的实现。合理的网页布局体现的是内容和形式的统一、协调和均衡，能够以清晰愉悦的视觉导向告知访问者站点的主题聚焦，方便用户快速而高效地找到自己所需要的内容，同时还可以快速而准确地将数据信息传递给搜索引擎爬行。毫无疑问，响应式布局就是通过技术优化[3]来实现网页跨终端适应性以及数据搜索引擎优化的可读性，赋予用户舒适的整体美感和良好的阅读体验。

网页布局是网页设计中的核心环节。以PC机为终端的网页布局往往采用“国”字型、“匡”字型等版块形式，内在架构普遍采用DIV+CSS2技术模式。而DIV+CSS2是基于盒状模型的网页布局解决方案，全程依赖于display、position和 float等属性的设置，网页宽度是一种可量取、可控制，以像素为度量单位的固定布局方案。当分辨率为800px×600px时，网页宽度约定为778px以内，高度由布局和内容决定；而当分辨率为1024px×768px时，网页宽度控制为1002px以内，高度控制在612～615px之间，以避免出现滚动条。然而，伴随着移动互联网的飞速发展和移动终端的普及与应用，用户上网方式发生了巨大变化，越来越多的人选择了智能手机和iPad一类的平板设备来浏览页面。移动终端设备分辨率千差万别，分辨率极小值为320px，极大值已达2560px，甚至更高。以PC机为基准的固定布局式网页一旦迁移到移动终端时，往往出现页面杂乱不堪，造成用户阅读困难，难以聚焦信息内容。由此可见，基于传统的网页布局无法兼容和感知移动终端的视口尺寸[4]和旋转取向，违背了移动互联用户无障碍获取信息的初衷。

针对移动用户体验不足的问题，一些资金和技术雄厚的门户网站，使用自适应布局[5-6]技术为移动设备量身定制多个网页版本，解决了在分辨率不同的设备上如何显示相同页面的问题，但由此出现了多版本的维护成本剧增和网站多入口(portal)的架构设计难度以及小屏幕上查看内容太多时的拥挤现象。于是，“一次设计，普遍适用”的“响应式布局”设计理念应运而生，并得到了网页设计师和专家学者的狂热式追捧和扩散式关注。与此同时，以谷歌为代表的浏览器厂商纷纷加入响应式布局技术的开发行列，加速响应式布局概念的拓展和延伸，融合了自适应布局和流体布局[7]的理念，迭代出弹性布局[8]理念，而且涵盖内容更多,增加了响应式图片[9]和响应式文字等响应式内容。作为新一代的跨平台技术的HTML 5集成了响应式布局理念，很好地解决了移动设备屏宽的“自动设别”和网页布局的智能调整以及搜索引擎的精确抓取。辅助 CSS3技术支持的Web应用实现了网页在不同终端之间的自由切换和平滑过渡[10]，为移动用户提供了舒适的呈现界面和良好的用户体验。融合jQuery技术支持的Web元素很好地实现本地人机交互功能，加强了响应式布局网页的用户体验。

1 HTML5技术优势

以期能在“开放Web平台”的互联网应用领域，为桌面和移动平台带来无缝衔接的统一标准,万维网联盟(W3C,World Wide Web Consortium)历经8年的艰辛努力，终于在2014年10月29日完成并发布HTML5标准规范。HTML 5标准广义上是三种技术组合的网络应用标准集：涵盖HTML5、CSS3和JavaScript，使得“丰富性网络应用服务”不再依赖于浏览器的插件支持。

HTML5是紧随HTML4.01之后的升级版，但不局限于HTML规范的简单升级，而是一次重要的功能突破。HTML5的出现具有划时代意义，它将HTML技术从单纯的标记语言转变为全新的Web应用开发框架和平台，着力解决当下Web开发中存在的诸多问题。

1.1 结构元素的语义化

与前一版本HTML4相比，HTML5的优势集中体现在良好的语义特性[11]，新增了一些与页眉、页脚、导航、内容区块等有关的文档结构元素，从而使得网页布局无需CSS的支持。语义化结构元素的使用也可使得网页整体结构更加直观和清晰明确。经典的圣杯布局[12]经过HTML5技术重构后，其文档结构语义一目了然。

…

由此可见，语义化结构标记的引入不仅使得网页代码编写化繁为简，轻松地实现了文档结构及其信息语义化，还使得众多搜索引擎和屏幕阅读器能轻松地理解、抓取和识别网页内容及网页层次关系。

除此以外，HTML5还提升了表单的智能化功能，增加了多媒体播放和控制元素(audio和video)和扩展功能元素(画布Canvas API、地理定位Geolocation API、索引数据库IndexedDB)。可以说，HTML 5的出现标识Web前端开发进入了一个新时代。

1.2视口元素的感知力

在响应式布局设计中，视口(viewport)是一个非常重要的概念，用于描述浏览器解析网页时的内容显示区域。针对移动端浏览器而言，ppk将viewport分为三种[13-15]，一种是可视视口(visual viewport)，等价于设备屏宽大小；另一种是layout viewport(布局视口)，等价于网页设计布局大小，也是浏览器解析网页时的首选视口，通常大于可视视口；第三种是理想视口(ideal viewport)，等价于网页跨终端显示时的自动匹配视口，理想视口的意义在于网页布局的跨终端性和自适应性。在没有横向滚动条的情况下，即使没有手动缩放，理想视口的网页也能完美地呈现给用户。为了解决网页布局的跨终端和自适应性，HTML5技术提供名为viewport的meta元素，使得网页具备了设备感知能力，从而解决了移动终端的屏宽尺寸兼容性问题。其通用代码如下：

上述代码中，width用于控制布局视口，当width = device-width时，则表示viewport宽度取值理想视口；initial-scale= 1.0用于控制初始缩放比例，其值为 1.0 时也表示viewport宽度取值理想视口。二者联合应用的原因是在解析网页布局时，部分终端设备(iphone、ipad)和IE浏览器均存在不同程度的横竖屏不分的小缺陷。其中，width = device-width解决了IE的毛病，initial-scale =1.0以竖屏宽度为基准，从而解决了Iphone和Ipad等设备的显示故障。user-scalable用户控制是否允许用户进行缩放。maximum-scale用于控制最大缩放比例。

1.3响应式图片[16]的自适应

响应式图片是指根据屏幕尺寸和应用场景选择合适的图片，以适应上下文视觉的审美体验。响应式图片的解决方案有两种：分辨率切换和艺术指导。分辨率切换是比较普遍的方式，适用于保留图片内容和宽高比，同时允许改变图片分辨率的情形，俗称同一图片的不同版本，如图1所示；艺术指导适用于需要改变图片的内容和宽高比例时的场景，即不同视口映射不同图片，如下页图2所示。

图1 分辨率切换

图2 艺术指导

1.3.1 分辨率切换

上述代码中，src属性描述浏览器不支持srcset属性时显示的图片；srcset属性是一个包含两个值(图片资源，视口宽度)的图片资源列表描述项目，提醒浏览器该图片宽度的大致规格(px)，其中w是描述宽度度量标识符；sizes属性则是一组包含媒体条件、源图宽度的属性值集合项目，专门用来描述特定媒体条件下的图片宽度限制，其中vw(1% viewport width，视口宽度的1%)是当视口宽度取值单位为w时，源图宽度唯一可用的单位。

与此类似的还有vh(1% viewport height，视口高度的1%)、 vmin(视口宽度、高度中较小值的1%)、vmax(视口宽度、高度中较大值的1%)。

1.3.2 艺术指导

分辨率切换虽然解决了单一图片源的缺陷，但是没有解决图片主体和全景的视觉适应性，即小屏幕时放大图片的主体部分，大屏幕时显示图片的全景信息。在插件Picturefill[17]的配合下，HTML5新增的元素可以实现不同视口分别显示不同场景的图片，相关代码举例如下：

上述代码中，source标记是描述图片资源列表，其中media属性是指定图片的屏宽响应范围，srcset属性则是指定图片的名称及其文件夹；而img标记及其属性则用来是解决浏览器的兼容性问题，默认是不显示的，只在浏览器不支持picture时候才会显示。

2 CSS3技术优势

CSS是将网页内容与样式实行分离的一种标记语言，使得HTML语言单纯描述信息内容，并能更好地适应CSS样式的美工设计。其基本原理是通过选择器、属性和属性值的样式组合来精确控制网页布局、背景、字体等表现效果。

CSS3是CSS2技术的升级版，它提供了更加丰富且实用的规范，以模块化设计方式对CSS功能进行重组，划分成若干个相互独立的模块，有助于厘清各模块之间的关系，减少完整文件的存储空间。在不牺牲性能和语义结构的前提下，CSS3提供了更多风格和更强特性。此外CSS3新增了弹性盒子布局、多栏布局、边框、动画效果等模块，有利于网站的开发和维护，提升了代码编写效率。在Web开发中，使用CSS3技术将会在页面美化、动画创作等方面显著地提高用户体验，同时有助于应用程序的智能感知设备的视口差异性。响应式设计就是通过CSS3的媒体查询、弹性布局模式来实现元素在盒子中的分布方式和空间位置更加灵活，从而达到网页视口的自适应和图片、文字等内容大小的自我调整。

2.1 媒体查询的逻辑性

媒体查询是CSS3的一项关键技术，可以为Web页面设置不同的视口样式，实现页面跨平台的渲染效果。在CSS3规范中，媒体查询通过媒体类型、媒体特性表达式(视口屏宽、设备方向)等参数自动调整页面呈现方式，其通用代码如下：

@media mediatype and|not|only (media feature){property：value;}

上述代码中，mediatype 取值可以是all(所有类型终端)、screen(屏幕)、print(打印机)和speech(屏幕阅读器)，screen是媒体类型缺省值，因而网页设计通常省略mediatype子句，简化为@media (media feature){ property：value;}形式；and、not和only是关系运算符，分别表示合并、排除、特指的媒体特性；media feature是由min-width 或者 max-width和断点[18]组成的媒体特性表达式。

断点是网页布局及其内容和样式发生变化的临界点，往往由终端设备视口屏宽大小来决定。由于终端设备视口的屏宽大小不一、数不胜数，因而为所有终端设置断点既费时费力又没有意义。常见的办法是依据主流终端设备的视口屏宽划分断点，然后有选择性地编写3～5个断点的媒体查询代码。一般断点如下：

//屏宽大于等于480px时应用

@media (min-width: 480px) {}

//小屏幕大于等于768px时应用，如平板

@media (min-width: 768px) {}

//中等屏幕大于等于992px时应用，如普通桌面显示器

@media (min-width: 992px) {}

//大屏幕大于等于1200px时应用，如超大桌面显示器

@media (min-width: 1200px) {}

2.2弹性布局的智能化

弹性布局(Flexbox Layout)是一种突破方向限制的柔性流体布局机制(display:flex;)，且具有改变伸缩性子项目(flex item)空间大小，以最佳效果填满伸缩性父容器(flex container)可用空间的弹性计算能力。这种计算能力使得弹性布局可以简便地、完整地、响应式地自由匹配各种媒体查询断点，从而实现不同页面布局之间的自由切换和平滑渐变。可以说，弹性布局是响应式布局的灵魂所在，开启了网页布局的一种智能化模式，同时也解决了网页设计中一些存在多年的困扰，如方向性、居中对齐等布局问题。

2.2.1弹性盒模型

弹性布局是基于弹性盒模型的，是对盒装模型(DIV+CSS2)的一种改进，盒内元素不再使用float、clear和vertical-align属性。整个弹性盒模型划分为伸缩父容器、伸缩子项目、主轴(main axis)和交叉轴(cross axis)4部分，如图3所示。弹性盒模型提供了两组属性集，分别用来控制父容器和子项目的伸缩、方向、对齐和次序，以实现弹性布局的智能化布局理念，如表1和表2所示。

图3 弹性盒模型[19]

表2 子项目属性及其取值说明

2.2.2 弹性计算

弹性布局的灵活性得益于其“伸缩性”，这种伸缩性主要是通过父容器的伸缩性(display:flex;)来控制子项目的伸缩性(flex: flex-grow flex-shrink flex-basis属性的综合应用)。子项目伸缩性计算过程包括扩展空间和收缩空间两个过程[20-21]。

第一，扩展空间计算过程。

当父容器空间大于所有子项目空间总和时，各子项目可通过扩展(flex-grow)方式占用父容器多余空间，从而填满父容器空间，其计算过程如下：

step1 首先计算剩余空间：父容器空间(width)减去所有相邻子项目初始空间(flex-basis)的总和；

剩余空间=父容器width-所有相邻子项目flex-basis的总和

图4 计算剩余空间示意图

step2 然后计算剩余空间的等额空间：将剩余空间按照所有相邻子项目flex-grow的总和均匀划分；

等额空间 = 剩余空间/所有相邻项目flex-grow的总和

图5 计算等额空间示意图

step3 最后计算各子项目扩展后的空间：扩展因子与等额空间相乘后加上初始空间。

子项目扩展后的空间 =初始空间(flex-basis) + 等额空间 x flex-grow值

图6 计算扩展空间示意图

第二，收缩空间的计算过程。

当父容器空间小于所有子项目空间总和时，各子项目可通过收缩(flex-shrink)自身空间的方式，从而阻止父容器溢出空间，假定有父容器(width: 300px;)和子项目A、B、C 3个，flex-basis取值分别为100px、 200px、200px，其flex-shrink取值分别1、2、3，则其计算过程如下：

Step1 计算父容器溢出空间：由所有相邻子项目的初始空间总和减去父容器空间得到；

溢出空间=(100+200+200)-300=200

图7 溢出空间示意图

Step2 计算所有相邻子项目的线性加权之和：子项目与之收缩因子乘积的累加；

线性加权之和= (1×100) + (2×200) + (3×200) = 1100

Step3 计算各子项目的收缩权重：将子项目与之收缩因子的乘积除以线性加权之和,依次得到各子项目的权重；

A的权重：(1×100)/1100=0.09091;

B的权重：(2×200)/1100=0.36364;

C的权重：(3×200)/1100=0.54545;

Step4 计算各子项目的收缩空间：子项目的各自权重与溢出空间的乘积得到各自的收缩空间。

A的收缩空间：0.09091×200=18.182

B的收缩空间：0.36364×200=72.727

C的收缩空间：0.54545×200=109.091

Step5 计算各子项目的最终空间，初始空间减去收缩空间。

A的最终空间：100-18.182=81.818

B的最终空间：200-72.727=127.273

C的最终空间：200-109.091=99.909

图8 收缩空间示意图

2.3 响应式文字的灵活性[22-23]

响应式文字是指字体大小以根元素(HTML)字体基数为基准，能够在一定范围内依据设备尺寸等比例缩放，从而实现大屏幕加大字体尺寸和小屏幕缩小字体尺寸。

为了实现不同视口之间的字体大小精确平滑变换，CSS3引入了相对单位rem，W3C标准规定1rem等价于根元素字体大小(font size of the root element)，由于浏览器字体大小基数默认值都是16px，为了便于响应式字体计算方便，一般需要用重置根元素字体大小基数为html{font-size:62.5%;}，即设置根元素字体基数为10px。响应式文字设计步骤如下：

Step1 重置根元素HTML字体基数;

html{font-size:62.5%;//10÷16=62.5%}

Step2 确定字体极值；

article{font-size:1rem;//极小值字体大小}

@media(min-width:1200px){

article{font-size:2rem; //极大值字体大小}

}

Step3 设置媒体查询断点极值(位于字体极值代码行间)；

@media(min-width:320px) and (max-width: 1200px){//响应式字体实现代码;}

Step4 实现响应式字体大小精确平滑变换;

article{

font-size:calc(1rem+(2-1)*(100vw-320px)/(1200-320)); //100vw-320px表示屏宽度减去最小宽度的值}

3 jQuery技术优势

作为JavaScript的子集，jQuery是一种快捷小巧的、功能丰富的轻型脚本库，其主要功能是遍历和操作HTML元素，实现对页面元素的控制和特效设置。

在响应式布局网页设计时，响应式导航栏通常需要jQuery技术辅助实现导航栏的收缩和扩展。当屏幕足够宽时，显示所有导航菜单，如图9所示；一旦屏幕宽度小于设定值(480px)时，导航栏主体菜单隐藏，呈现收缩状态，如图10所示；此时，单击系统按钮Ξ后，导航菜单以下拉式菜单弹出，如图11所示。

图9导航栏全局示意图

图10导航栏收缩示意图

图11 导航栏弹出后示意图

3.1 导航栏的HTML5代码

3.2 JQuery脚本控制代码

3.3 关键性CSS3代码

nav a#menuPull {

display:flex;

flex-direction: row;

justify-content: flex-end;

background: #1a54a4;

font-weight: bold;

font-size: 2rem;

font-family: arial, fantasy;

padding: 0 0.5rem;}

nav a#menuPull::before {

content:"合肥学院";

font-size: 1.6rem;

width: 8rem;

height:2rem;

padding: 0.15rem 0.5rem;

position: absolute;

top: 0;

left: 0.5rem;}

@media only screen and (min-width : 480px){

……

nav a#menuPull {

display:none; }

}

4 仿真实验

为了验证本文所提技术的可行性，使用本文技术对圣杯布局进行重构，并完成了响应式布局设计验证。实验环境选择Xamp服务器，编辑开发工具选择JetBrains WebStorm 11.0.3，运行浏览器选择Google Chrome，考虑到目前浏览器普遍支持CSS 3，编写CSS 3代码时无须添加浏览器私有前缀符-webkit-。

4.1 实验流程

首要任务是对圣杯布局进行响应式原型设计，需要考虑到尽可能多的终端设备显示视口，包括最小的宽度和最大宽度的兼容性以及不同宽度的合理比例以及各元素的位置、大小。其中两个极值的原型图，如图12所示。

图12 响应式布局示意图

其次是遵循HTML5语言语法规则将原型结构语义化，通常需要将DIV+CSS2等固定布局中描述结构的ID属性给予语义化，转换成HTML5语义化结构标记。

再次，在遵循HTML5+CSS3工作原理的情况下，为各标记编写CSS3代码，实现响应式布局设计。关键代码如下：

header,#main,footer{

display:flex; flex-flow:row wrap;}

#main>article{ order:1;flex:1 100%;}

#main>nav{ order:2;flex:1 100%; }

#main>aside{ order:3;flex:1 100%; }

header{background:tomato}

footer{background:lightgreen}

article{ background:deepskyblue}

nav{background:gold}

aside{background:hotpink}

@media all and (min-width:480px){

#main>nav{ flex:1 auto; }

#main>aside{ flex:1 auto; }

}

@media all and (min-width:768px){

#main>nav{

order:1; flex:1 auto;}

#main>article{

order:2; flex:2 auto;}

#main>aside{

order:3;flex:1 auto;}

}

最后，根据需要在文档结构中添加其他元素，直至最终完成整个网页设计。

4.2实验分析及注意事项

通过实验得知，本文算法能够适应移动终端设备屏幕分辨率的千差万别，同时满足了用户体验的审美愉悦性。此外，为了满足图片和文字的响应式布局效果，实际应用还需要注意以下几点。

第一，使用相对单位，放弃像素(px)单位。推荐使用em、rem和百分比(%)单位来限定布局元素，如此可以根据客户端分辨率的大小来进行合理的显示。固定宽度转换为百分比宽度的计算公式：百分比宽度 = 子元素宽度 / 父容器元素宽度。

第二，为图片(img)、视频(video)等多媒体元素设置max-width:100% 和height:auto，可让图片、视频按比例缩放，自动填满父容器。

img,video,embed{

max-width:100%;

height:auto；}

第三，注意断点顺序。无论是移动优先还是台式桌面优先，编写代码和显示效果区别不大。但是，移动优先会带来一些额外限制，有助于理解断点大小关系。

第四，嵌套实现图文混排效果。通过双重DIV标记实现外层弹性布局，内层图文混排效果，如图13所示。

.outer {

display: flex; flex-flow: row wrap;

padding-right: 10px;

width: 50vw; border:solid 1px blue; }

img{

margin:10px 10px 5px;

max-width: 30vw; height: auto;

float: left; //混排效果 }

《数据库原理与应用》主要讲述数据库技术……

图13 图文混排局示意图

4 结论

通过验证实验可知，HTML5引入了一些新元素，将使得网页更合乎语义化标准，使得众多浏览器能够完美地呈现网页，并能改善移动终端和搜索引擎的用户体验。CSS 3提供的媒体查询功能实现了网页在智能手机和平板等多种终端设备之间的平滑过渡和自由迁移，智能化切换分辨率和图片尺寸，避免了页面变形。辅助JS技术可以更好地实现响应式布局中一些元素智能控制功能，从而为不同终端的用户提供更加舒适的界面和更好的用户体验。最后为了让用户有一个更完美的体验，对通过圣杯布局的代码重构，达到了本次实践成果，成功地展示响应式布局网页设计的方案优化。