信息工程

响应式Web当前位置> 美高美游戏 > 信息工程

随着移动互联网的迅速发展, 越来越多各式各样的移动设备开始不断涌现出来, 然而不同移动设备的显示屏分辨率却各不相同, 所以在网页设计时, 如果只针对某一种或某几种型号的设备设计网页, 显然是不可行,现在移动设备更新换代速度很快, 如果每更新换代一次就要重新设计一个网页显然是不现实的。此种情况下,响应式网页的出现就很好解决了这一问题。响应式网页设计能够根据不同情况对访问设备分辨率的大小、网页图片的像素、尺寸等进行自动 适当调整。换而言之,无论使用的是哪一种规格的笔记本、 iPad 或者移动手机浏览网页,响应式的网页都能自动适应, 然后进行分辨率、页面和图片大小的调整,以使浏览者达到 一个最舒适的浏览状态。响应式网页的出现避免了为每一种设备进行专门的设计研究与开发,使设计网页的过程更加简 化、高效。

一、传统Web设计类型

传统Web设计包括四种布局类型:固定布局、可变布局、弹性布局和混合布局。

固定布局:固定布局意味着页面宽度被指定为特定大小的像素,使用 最广泛的是 960px或1024px,它是 WEB布局中最为常见的实现方式,该布局给人一种对页面有较多控制权的错觉,即使在不同的屏幕上显示,也看起来相当一致。 固定布局的缺点在于,相对于浏览者的窗口而言,某些浏览者看到的设计不是过窄就是过宽,例如,如果页面设置宽度为960px,而用户浏览器宽度为 880px,则用户只能看到页面内 容的一部分,且会出现一个丑陋的滚动条。反之,则会出现大面积、未使用的空白区域。因此,严格的固定布局在今天广泛而多样的设备终端中早已问题重重,需要更灵活的布局技术来适应不同类型终端的显示需求。

可变布局:可变布局中将度量单位由固定布局中的像素变成了百分比,此处的百分比即为内容所占视口(viewpoint)的比例,该布局会基于视口的大小而更改宽度,这样就使页面具有了可变的特 性。在可变布局中,可以将页面根据不同的需求分为几部分, 如分为三部分,则内容栏占视口宽度 60%,边栏区占 30%的,分割区占 10%的。无论用户使用的是 1024px宽的桌面浏览器还 是768px宽的平板浏览器或其他,页面中元素的宽度会根据浏览器窗口的宽度自行调整,从而避免横向滚动条和大面积的空白区。

弹性布局:弹性布局和可变布局很相似,只是度量单位不同,弹性布局由可变布局中的百分比变成了相对单位em,该布局的宽度基于用户浏览设备中设置的文本大小而自动更改。

混合布局:混合布局则是根据用户不同的需求,需要结合了上述两种或两种以上的布局方式才能实现的方法。若一个广告图片宽为300px,则此时可以将放置广告的边栏指定为固定的300px宽, 其余列或区域则以百分比显示,这样,即可保证广告的宽度固 定位300px宽,同时,除该边栏以外的区域可填充满剩下的整个空间而没有多余的空白或滚动条。

二、响应式 WEB 设计

响应式 WEB设计技术由流式布局、自适应图片、媒体查询三种技术组成。基于 HTML5 和 CSS3,它通过百分比布局来创建动态自适应界面,然后利用媒体查询来约束元素的变动范围,以及通过设置图片的百分比来动态调整其显示比例,从而实现了对不同访问终端进行最优适配的解决方案,保持桌面端 与移动端用户体验的一致性。

图1 响应式设计流程

媒体查询可根据不同分辨率尺寸调整样式以适应不同的显示终端,可查询多种媒体特性,如视口的宽高、屏幕的宽高、 设备的方向、分辨率、宽高比等,使页面内容在不同的屏幕大 小、终端横竖屏模式、不同的宽高比等情况下显示完全,避免显示错位或阅读困难。

三、基于Bootstrap框架的Web设计

在响应式Web设计中Bootstrap框架最为流行,它能够快速高效、成本低廉、独具特色地开发出响应式网站。

Bootstrap的栅格系统基于网格系统发展而来,应用十分广泛,如书籍版式设计等。Bootstrap的栅格系 统是一套响应式、移动设备优先的流式栅格系统,通过媒体查询(media query)确认当前页面容器(container)宽度,并通过内置的响应式、移动设备优先的流式栅格系统进行渲染,使页面在不同屏幕宽度范围下使用不同的容器宽度。随着屏幕设备或视口尺寸增加,系统会自动分为最多 12列。

栅格系统应用包含两个要点:

(1)容器(container)、行(row)和列(column )之间的构建关系。为了给栅格系统设置合适的排列(alignment)和内补(padding),需将每一行“row”包含在一个容器中,该容器用class命名为“container(固定宽度)”或者“container-fluid(100%宽度)”。 Bootstrap中的栅格系统将每一行分成12等份,其中,“row”代表行,“col-xx-y”代表列,而“col-xx-y”中 的“xx”表示断点类型,“y”值则从1-12中取值。在不同的列中添加相应页面内容,合理选择列的y值,才能使页面内容更具可读性。

(2)不同断点类型的意义及其搭配。实际上Bootstrap的栅格布局系统主要是利用CSS的媒体查询特性来实现。在Bootstrap中定义了以sx、sm、md、lg来表示的4种不同阈值断点类型,如表1所示。

表1 Bootstrap的4种阈值断点类型

断点类型 意义
col-xs- 无论屏幕宽度如何,单元格都在一行,宽度按照百分比设 置;该类型适用于手机。
col-sm- 屏幕大于768px时,单元格在一行显示;屏幕小于768px时,独占一行;该类型适用于平板。
col-md- 屏幕大于992px时,单元格在一行显示;屏幕小于992px时,独占一行;该类型适用于桌面显示器。
col-lg- 屏幕大于1200px时,单元格在一行显示;屏幕小于1200px时,独占一行;该类型适用于大型桌面显示器。

在视口宽度由小变大的过程中,column列会保持默认的竖直堆叠,当视口宽度超过sm的断点值,sm断点样式生效,column列变为一行两列;当视口宽度超过lg的断点值,lg断点的样式生效,由于lg断点的样式代码定义在sm断点之后,所以lg断点会覆盖sm断点样式,column列变为一行四列,如图2所示。

图2 视口宽度变化过程

Bootstarp媒体查询部分主要适配电脑、手机和平板电脑。在 Bootstrap框架自带的Less文件中使用media query来创建断点阈值,以此实现响应式Web设计,实现代码如下:

超小屏幕xs(<768px),在 Bootstarp中是默认配置;

小屏幕sm(768px~992px),@media(min-width:@screen-sm-min){……};

中等屏幕md(>992px),@media(min-width:@screen-md-min){……};

大屏幕lg(>1200px),@media(min-width:@screen-lg-min){……}。

在实际网站开发过程中,开发者不需要花费过多时间进行编码,只需要在相应的位置插入正确的代码即可。

通过定义class="col-xs-4 col-sm-4 col-md-2",多种断点类型组合使用,使 Web页面效果不受屏幕分辨率影响。在不同的屏幕分辨率下,不同的column列的类会发挥相应作用,以确保用户体验,实现响应式Web设计。

栅格系统在响应式Web设计中有很多优点:

(1)代码简洁、易懂,非前端开发人员也能快速掌握;

(2)使用栅格系统可以节省网站开发与维护成本;

(3)提升网页书写规范性。

栅格系统并非完美,有以下缺陷需要优化:

(1)类名命名没有语义化,需要参考手册;

(2)对IE浏览器的兼容性有待改善。

四、我校开发的响应式Web网站

我校信息网络中心CMS开发小组自主开发的学校主页、数字图书馆网站、资讯网、招生网等,均采用基于Bootstrap框架的响应式Web设计技术,包括Fontawesome矢量字库、Layer组件及jQuery等技术,开发效率高、成本低,拥有较好的用户体验。

图3 学校主页PC模式

图4 学校主页iPad、手机模式