学校校园响应式网页设计探析

　　【论文来源】：谢日敏，郑佳芳。校园响应式网页设计应用研究[J].电脑知识与技术，2015,14:209-210.

　　随着互联网的发展，移动版的网站得到广泛的青睐。用户希望能够开发一种兼容性强的web应用，即可以适应Iphone手机、Andriod手机、PC机及平板电脑等终端应用，又具有良好的用户体验。传统的web设计是针对不同的终端，依据用户需求开发不同终端页面效果。因此，对设计开发人员而言，将大量的精力放在了业务应用表现层的复杂设计上。Ethan Marcotte在2010 年提出响应式网页设计（Responsive Web Design），为不同终端用户提供了更友好的用户体验[1].

　　1 响应式网页设计

　　响应式网页设计针对不同的屏幕尺寸和系统平台，能够及时响应用户行为情景。当用户从便捷电脑转换到平板电脑时，页面的图片大小和脚本功能 能够自动适应用户体验。也就是，网站能够自适应用户的喜好，其主要消除了为适应新终端的业务应用，而重新进行页面设计的重复作业[2].

　　响应式网页设计不只是屏幕分辨率可调和图像大小自动调整，而是一种全新网页设计思维方式。现有响应式设计技术主要包括以下特征[3-4]:

　　1）移动优先（Mobile First）。移动优先是响应式网页设计中性能设计的重要组成部分。在响应式网页设计中，网页最主要的部分是设计为移动优先，使得敏感的设计是以桌面网站的方式或类似的隐藏技术来替换，从而提升用户体验感觉。

　　2）层叠样式转换和媒体查询（CSS Transitions and MediaQueries）。使用层叠样式转换和媒体查询依据浏览器的宽度，实现自适应页面布局，从而查阅网站内容时，可以快速无缝的在不同页面风格之间进行跳转。

　　3）响应式数据表（Responsive Data Tables）。传统数据表从PC端转换到移动端，往往由于缩小整个数据表，导致字体变化而不可阅读。响应式数据表就是要重新格式化表，使其具有更好的可读性。

　　4）响应式导航菜单（Responsive Navigation Menus）。在终端屏幕缩小时，原有固定横向菜单的链接方式转换为一种下拉式菜单，替换原有的菜单项。

　　5）流式布局（Fluid Layouts）。以往有四种不同的布局类型：固定宽度的布局，液态布局，弹性布局和混合布局，其各有优缺点。流式布局通过设置布局的百分比以及CSS 的浮动属性等技巧使得响应式网页设计更加灵活。

　　6）响应式图像（Responsive Images）。响应式图像采用一种上下文感知图像尺寸方式，为不同分辨率下图像尺寸不同布局的情况，提供背景图像尺寸响应优化方法。由于响应式网页设计近几年才发展起来，各类技术还需不断的进行优化和改进，但随着类似Google企业也建议优先采用响应式设计，使得更多的团队加入到响应式网页设计研发当中，出现了不少基于响应式网页设计理念的前端框架。

　　2 前端框架比较分析

　　通过表1对主流响应式网页设计的前端框架进行比较分析，表明Bootstrap在国内外具有较高的支持度，而支持语义化的Semantic UI在国外具有较强的竞争优势[5].

　　3 实际应用

　　高校校园信息化建设过程中，主要平台包括信息门户、统一身份认证和数据中心。在这三大平台中信息门户平台的业务应用有信息发布系统、教务系统、网络课程平台、邮件系统和办公系统等。由于在信息门户平台业务实施过程，强调多业务应用的深度融合，而业务应用关于各类终端的自适应界面布局成为关键。本文采用Bootstrap对业务应用进行融合，使得师生可以在不同终端进行统一业务操作，如图1至图2.

　　4 结束语

　　校园响应式网页设计，必须从流行性、可持续发展、成熟的特点以及完善的文档支撑进行考量。在项目实践过程中，响应式网页设计必须与相关网站开发产品进行集成，解决各类终端界面自适应问题，增强网站的可持续性和可维护性。