响应式高校图书馆网页设计初探

孙秀惠

摘 要：随着移动互联网的普及，手机、Pad、Kindle等移动设备越来越多地出现在我们的日常生活中，采用移动设备阅读已成为当代大学生们獲取信息的主要途径。而不同的客户端在访问传统的图书馆网站时会显示相同的内容，在手机或Pad这种小屏幕中内容缩小显示，读者在手机或Pad的小屏幕上不停地滑动，阅读信息时放大页面，查找信息时再缩小页面，不断放大页面中的交互按钮才能完成相应功能的操作。而采用响应式设计的高校图书馆网站能够为不同终端的读者带来更加友好的用户体验。

关键词：响应式设计 高校图书馆 移动优先

中图分类号：G25 文献标识码：A 文章编号：1672-3791（2018）03（b）-0198-02

随着移动互联网的普及，手机、Pad、Kindle等移动设备越来越多的出现在我们的日常生活中，采用移动设备阅读已成为当代大学生们获取信息的主要途径。同时用户浏览网页的习惯逐渐从电脑PC端向手机、Pad等移动设备转变，读者访问传统图书馆网站的习惯也慢慢由PC端向手机、Pad等移动设备转变，因此，构建新的图书馆门户网站，显得尤其重要。但是移动设备多种多样，不同的设备有不同的系统平台、不同的屏幕分辨率等，为具有不同系统平台和不同分辨率的设备分别创建不同版本的图书馆门户网站是不现实的，而且难以维护。伊桑·马科特在2010年提出的响应式网页设计（Responsive Web Design），能为不同终端的读者提供了更友好的用户体验。

1 概念与设计思想

响应式Web设计的理念是：页面设计和开发应该基于用户行为和设备环境（系统平台、屏幕大小、屏幕方向等）进行相应的响应和调整。响应式web设计，应遵循“移动优先，渐进增强”的设计原则。“移动优先”是指因为各种移动设备的大小和分辨率的不同，考虑更多的布局和显示效果，优先进行移动设备的设计，这有助于提升响应式Web页面的开发效率。“渐进增强”指的是按照从小屏幕到大屏幕的顺序开发响应式网页。在小屏幕上，由于显示空间有限，网页应该突出主要内容和表现；随着屏幕的增大，网页的显示效果会越来越丰富，逐渐增强；在网页能够兼容各种版本浏览器的情况下，为高级浏览器添加新的效果来改进用户体验。因此，无论用户是使用PC或其他的移动设备，页面都能够自动切换图片大小、分辨率和相关的脚本特性，以便与不同的设备相适应，也就是说，页面能够自动响应用户的设备环境。响应式web设计可以与多个终端兼容，而不是为每个终端设置特定版本的网站。于是我们就不必为层出不穷的新设备再做新的图书馆门户网站的设计开发了。

2 响应式网页设计（Responsive Web Design）的关键技术

响应式网页设计从提出至今，一直不断蔓延扩散。它的核心技术包含以下3个方面。

2.1 流式布局

现在用户使用各种不同的设备上网，传统的固定布局给用户带来各种不方便，显示效果也不好，响应式设计采用流式布局的方法避免了这种问题的出现。流式布局和固定布局的主要区别是：固定布局是以px为单位的左右固定宽度，流式布局是以百分比为单位的相对宽度。这里的百分比指的是宽度占其所在元素的百分比。

2.2 媒体查询

媒体查询是响应式Web设计的核心技术之一，是能对各种不同的设备做出不同响应的关键。响应式设计的网站会自动地探测到屏幕的宽度，再加载相应的CSS文件。

这段代码的意思是：如果屏幕的宽度大于或等于1000px，那么就加载large.css文件。

加载CSS文件有两种方法：（1）用HTML标签来加载 CSS文件；（2）用现有的CSS文件来加载。

@import url（“tinyscreen.css”）screen and （max-device-width：400px）；

在同一个CSS文件中也可以根据不同的屏幕分辨率，选择不同的CSS 规则。

@media （max-width：480px）{ body{background：#CCC；} }

这段代码的意思是：如果屏幕的宽度小于等于480px时，那么网页背景颜色呈灰色。

@media screen and （min-width：480px） and （max-width：768px）{

body{background：#F00； } }

这段代码的意思是：如果屏幕的宽度大于等于480px且小于768px时，网页背景颜色呈红色。

2.3 弹性图片

许多网站在处理小屏幕设备上的图片时采取简单的方法：方法一，设置图片的CSS的“显示”属性为“空”，从而隐藏图片；方法二，通过媒体查询的方法将图像的缩放比例进行简单地控制，用这两种方式处理的图片仍然会按原始文件的大小来下载，既没有节省下载时间也没有节省流量，所以都无法达到我们想要的效果。目前最好的方法是先加载页面，然后根据页面的布局来确定哪些图片加载，根据不同的设备图片容器的宽度来设置断点，通过媒介查询为不同的断点提供不同的图片。

在视频处理方面，与图片处理不一样，小屏幕只提供视频链接，以提高页面的加载速度。在大屏幕上根据布局需要按比例缩放，关键是将视频容器和视频的长度、宽度设置成相同的比例，这样才可以随着容器的变化进行成比例的调整。

3 响应式高校图书馆网页开发可能遇到的问题

3.1 响应式网页设计在规划阶段有些耗时费力

与传统网站比较而言，响应式Web设计项目一般要花费更多的时间，在初期阶段要投入超过10%?20%的成本。 从图书馆的角度来看，可能需要更多技术力量的支持才能进入最前沿的技术阵地。

3.2 触摸屏的特性问题

在开发移动终端，如，手机或Pad的客户端样式时，触摸屏的特性需要得到充分考虑，如PC上的Hover（悬停）属性，我们没有办法在触摸屏上完成相应的动作。可以使用的解决方案是取消“悬停”功能，禁用“悬停”属性，并将整个站点切换到点击操作以触发相关功能。把滑动，放大等手势加入到图片中，更适合触摸屏的操作习惯。

3.3 浏览器的问题

在实际操作中发现，IE8和更早的版本的浏览器都不支持响应式设计的网站。这是因为媒体查询功能是CSS3提供的功能，所以只有那些支持CSS3的IE版本才能完成响应式设计。对于IE8及更早版本的浏览器，可以通过提醒读者升级浏览器版本或加载html5.js、media-queries.js来解决。

4 结语

使用响应式设计构建网站可以使其在手机、Pad、PC电脑等多种终端中表现良好，给读者带来更好的体验，从而提高读者对图书馆网站的满意度。近几年，响应式web设计的应用非常广泛，良好的显示效果和快捷的访问速度得到了广大用户的普遍认可和追捧，将是未来网页设计、开发的主流方向和趋势。国内的企事业门户网站、大学门户网站等都渐渐推出了自己的响应式网站门户，高校图书馆也应不断探索和实践，积极参与响应式技术设计，为读者提供更加人性化的服务和更加完美的用户体验。

参考文献

[1] 陈益全，吴多智.断点在响应式网页设计中的应用研究[J].微型电脑应用，2016，32（5）：41-43.

[2] 张欣辉.响应式网页设计的研究[J].电子技术与软件工程，2014（18）：57.

[3] 王愉，潘明明.响应式网页设计初探[J].北京印刷学院学报，2014，22（3）：13-15.