响应式网站的设计与开发

刘金承

长春金融高等专科学校，吉林长春 130028

响应式网站的设计与开发

刘金承

长春金融高等专科学校，吉林长春 130028

作为设计哲学和开发策略，响应式网站设计是一项能够自适应手机、平板电脑和PC等设备中的多种浏览器的网页技术，它主要通过CSS的媒体查询得以实现。广义而言，响应式开发是以参考分辨率开始的，然后加入媒体查询，以配合不同环境。本文介绍了一个高校实验中心网站通过UNKIT框架模板实现的响应式网站的案例。从而顺应了移动互联网的迅速发展趋势，满足了学生进行移动学习的需要和体验。使该校实验中心网站的改进能配以灵活界面，使得网站可以在不同分辨率下进行自我调整，真正实现了一套代码对多种设备的兼容。

响应式网站；CSS；高校实验中心网站；UNKIT

1 响应式网站的设计技术

1.1什么是响应式Web

近些年以来，由于移动端的流量在不断地扩大，手机、平板等移动端设备的层出不穷，为了更好的满足用户对浏览互联网的需求，提出了响应式技术这一概念。第一，一个响应式的网站无论在手机、平板还是PC端台式机、笔记本上，有且只有唯一的一个URL接口。第二，响应式的Web设计依赖于媒体查询来推动非固定布局，实现灵活设计，即通过查询到设备的各种属性值如设备类型、分辨率、屏幕物理尺寸及色彩等来决定求同存异的布局。第三，全站都使用响应式设计（只需使用一个代码库）去适应所有适备，力求实现多平台，多终端服务的一致性。

1.2响应式web的关键特性

1）流式布局以百分比单位为主，与传统的固定布局以像素单位为主不同。

2）媒体查询是CSS的语法规则，它能够基于查询定义的参数来控制样式。它根据不同设备提供不同的CSS，渲染不同界面以配合用户的设备环境。

3）断点指的是响应式设计的目标是避免出现为每一个可能的终端设备都制作设计一个网页。为了避免这种现象的发生，我们可以通过划出一些边界来调整页面的布局用以适应变化的内容如设定分辨率“断点”。

1.3广义的响应式开发的流程

根据EthanMarcotte[1]广义而言，广义而言，响应式开发是以参考分辨率开始的（原本的网格、界面或字体只为指定分辨率而设），然后加入媒体查询，以配合不同环境。假设以“移动优先”作为原则就把样式表建基于“移动优先”而非桌面版界面。因此设计的界面首先配合小屏，然后才用媒体查询，随分辨率增加逐渐提升。

1.4响应式设计的好处

响应式设计使用一个代码库就可以解决市面上的所有浏览器和设备的兼容问题。它的好处表现在通过“灵活性”来解决“不确定性”策略来实现。根据RobLarsen[2]有以下好处：

1）简化服务器。如果能进行合理的响应式设计，小心地使用图片，并且处理好性能问题，就算是要应对你的所有用户和具体设备的问题，你的服务器端也只需要提供一套并且最小化的逻辑。

2）更容易维护。使用响应式设计，你只需要维护一套前段的代码库。

3）只提供一个入口给搜索引擎。单一的网站及单一的URL列表会让你更容易做网站工作。

4）能够支持未知设备。在设计的时候，响应式设计已经忽略了特定的设备和操作系统，这使得响应式设计的网站可以具有自动适配现有的或者未来的设备的能力。

1.5响应式的缺点

有些设计师不认同这种方法，认为不同设备应使用不同标记，如果用了响应式设计，所有浏览器和设备都会收到同一个HTML文件。

另外，也有可能限制了应用的复杂性。一个应用是有可能同时实现高可用性和响应式设计这两个目标的，而且你的用户在手机上可能会有与桌面站点上不同的需求，能够意识到这个问题很重要。就有关金融方面网站而言，移动端的用户最大的需求就是可以查看并操作那些比较重要的内容，关注一些重大事件，无论是具体交易事件的反馈，还是了解一些重大的市场动态。在桌面站点，用户的需求可能更广一些，需要提供全站系统访问的支持，可能还需要提供对一些其他复杂系统的能力。再者在金融服务的应用上，大量的信息都显示在一个小屏幕里面是很不合理的。这忽略了整个系统的复杂性，因为金融交易者们甚至有可能需要三个宽屏显示器来展示多个数据源以便帮助他们做决策。除非你将数据做一些更适合小屏幕查看的特殊处理，并将粒度切分的更小，否则很难有一个有效的数据交互方式。试图在同一套代码库中硬塞很多需求，并期望仅仅单独通过媒体查询或同时依靠媒体查询与JavaScript来做一些简单的显示控制的话，在复杂的应用里面将很难服务好你的用户，尤其是在性能方面的问题。

2 常见的开源CSS前端框架

2.1关于CSS

2.1.1CSS定义

CSS 是一种样式技术，也有人称之为层叠样式。

2.1.2CSS的特点

根据张晓景[3]，CSS布局比传统的表格布局更简单、更自由地控制页面版式及样式。使用CSS定义样式的好处是利用它不仅可以控制传统的格式属性，如字体、尺寸、对齐，还可以设置诸如位置、特殊效果鼠标滑过之类的HTML属性。

2.2github上五种人气CSS前端框架简介

当今时代众多CSS的前端框架纷涌而至，但真正的优秀的却屈指可数。

这里讨论的最好的五个框架都是基于其在github上的人气展示，每个框架都有自己优缺点和特定的应用领域，这允许你根据特定项目的需求选择合适的框架。比如， 如果你的项目比较简单，你就不需要复杂的框架，此外，许多选项是模块化的，这允许你仅使用你需要的组件，或者混合使用不同框架的组件。

2.2.1Bootstrap

Bootstrap 在当今流行的各种框架中是无可争议的老大。鉴于其每天仍在增长的巨大人气，可以肯定，这个美妙的工具绝对不会让你失望，它也不会在你成功建立网站前就离你而去。

2.2.2UIKit by YOOtheme

UIkit是一个简洁的框架，它易于使用，易于定制组件。虽然它不像其它竞争对手一样受欢迎，但它提供了相同的功能和质量。

2.2.3Foundation by ZURB

Foundation是这几个框架中第二大的，在像ZURB一样实力雄厚的公司支持下，这个框架确实很强大，是的，就是Foundation。毕竟，Foundation已经在很多大型网站上投入使用，包括 Facebook， Mozilla，Ebay，Yahoo!和国家地理等等。

2.2.4Semantic UI

Semantic UI经过多年的努力，致力于能够以更语义化的方式构建网站。它使用自然语言的原则，使代码更可读，更容易理解。

2.2.5Pure by Yahoo!

Pure是一个轻量级的、模块化的框架，以纯CSS编写，它包括很多组件，你可以根据需要联合或独立使用它们。

总之，一个好的框架是需要结合最新的网络技术不断升级的，特别是关于移动方面的技术。如果一个特定的框架不满足您的需要，您可以从两个或两个以上的项目来混合组件，采用混搭方式。例如，你可以从一个框架得到较小的CSS样式基础从另一个框架得到一个优秀的栅格系统，再从第三个框架获得更复杂的组件。

在响应式网站设计开发中可将这些良好的框架作为模板简化应有的媒体查询，流体布局，断点等技术的操作，使开发变成了模块重组，省去了繁琐的代码编程。

3 本校实验中心响应式网站的设计

我们基于UIKit这个响应式的框架，来实现我们的实验中心网站的改进。

UIKit提供了超过30个模块化并可扩展的组件，它们可以组合使用。根据用途及功能，我们把组件分了为不同的类型。

1）默认：这些组件通常用来实现HTML元素的跨浏览器标准化功能，并添加了一些非常基础的样式。

2）布局：充分运用我们完全响应式的流体网格系统和面板，常见的布局组成部分如博客文章和评论以及其他一些实用的效果类型。

3）导航：UIKit 提供了不同形式的导航组件，如导航栏和侧导航。使用面包屑或通过一个分页来翻阅文章。

4）元素：基本的HTML元素样式，如表格和表单。这些组件使用自有的类。它们不会因想到任何默认的元素样式。

5）常用：在这里你可以找到一些经常在内容中使用的组件，比如按钮，徽章，这种，动画和其他很多的组件。

6）JavaScript：这些组件主要依赖于 JavaScript的淡出显示与隐藏内容，比如下拉菜单，模态对话框，抽屉和提示组件等。

为了避免与其他CSS框架冲突，所有的UIKit类均以uk-作为前缀进行命名。组件分为组件本身、子对象和调节器，其类名通常沿用组件名。

我们使用vs2012作为工具，来进行网站的设计。

首先我们制作site1.master页面作为整个网站的模板页。顶端我们设置实验中心的网站logo，接下来下方我们设置一个导航模块中的导航栏，图片logo以及导航栏都是响应式的，可以随着分辨率的缩小，而成比例缩小，当尺寸小于768px的时候，导航栏变为一个具有按钮的长条，点击按钮，左侧的抽屉式Off-canvas类就会展示出一个竖条的导航栏。接下来，我们设置class=uk-flex来对内容区域进行布局。

我们将整个内容部分，大致分为四行，每行我们设置三个模块，首先是实验室简介模块，简介的详细链接，我们用的是模态对话框，它是由一个遮罩层，一个对话框和一个关闭按钮组成。通过点击详细按钮或标签链接，打开一个遮罩层，显示具体内容。第一层中间是一个轮播的幻灯片，用来播放实验室环境图片等，我们还用到了swicher切换器等。首页基本上制作完毕，经测试，当分辨率小于768px时，整个内容部分的模块都会按顺序从上到下进行排列，显示在完整的屏幕窗口里。

除了技术上考虑我们还关注了学生用户的体验需求，实现其浏览网页的方便性和审美性。

4 结论

真正的响应式设计是基于灵活界面（但仍然可包括定宽控制）。其主要工作就是要让网页适配当下种类繁多的设备，使页面在不同设备上仍然看上去友好并且可用。使用响应式网页设计技术开发的新版网站让人有令人印象深刻的体验，使得网站可以在不同分辨率下进行自我调整，使布局在不同尺寸的屏幕上能够自如变换（如在窄屏上导航栏友好折叠起来、字体大小自适应等）。真正的实现了一套代码对多种设备的兼容。目前，已有许多国内高校的门户网站使用了响应式的网页设计技术，如复旦大学、清华大学、华东师范大学等，将来，响应式的网页设计技术也必将会成为高校门户网站的关键的技术。

[1]EthanMarcotte．响应式Web设计[M]．北京：人民邮电出版社，2016．

[2]Rob Larsen. Web 应变之道[M]．北京：电子工业出版社，2016．

[3]张晓景．JQuery网页设计深度剖析[M]．北京：电子工业出版社，2016．

TP3

A

1674-6708（2016）171-0133-02

刘金承，助理实验师，长春金融高等专科学校，研究方向为计算机应用。