基于响应式设计的网站研究与实现

武 昆，魏东岚，李 家

(辽宁师范大学 城市与环境学院，辽宁 大连 116000)

基于响应式设计的网站研究与实现

武 昆，魏东岚，李 家

(辽宁师范大学 城市与环境学院，辽宁 大连 116000)

随着移动互联网的发展进步，移动设备的不断更新，人们更加习惯使用移动设备访问网站。然而为每个设备设计特定的网站成本太高，因此，设计一个可以在任何设备上都拥有良好浏览效果的网站已经成为网站设计与开发的关键。本文通过研究响应式设计的相关技术以及相关脚本的运用，设计了一个测试性的新闻网站，使其能够根据当前主流设备的不同自行变换，调整布局，达到在不同设备上都拥有良好浏览体验的目的。

网页设计；响应式设计；媒体查询；切换式推出型导航

0 引言

随着计算机技术以及移动互联网的飞速发展，用户使用移动设备上网已经成为趋势，面对不同大小的屏幕，传统的网站设计已经不能满足人们的需求，人们迫切的需要网站能在任何大小的屏幕中完美运行，面对这种需求，响应式设计通常是最好的选择。

响应式设计是一种方法，它能够使网站在任何大小的屏幕上完美展示。而且响应式设计方法可以让设计者仅仅设计一套代码来适应任何大小的屏幕，这意味着设计者可以避免后期大量的维护工作，节省大量的时间去进行内容的优化，使网站的效果趋近完美[1-3]。

与传统的网站设计相比，响应式设计体现了较低的成本、良好的视觉效果、较快的开发速度的优势，避免了繁琐的操作[4]。利用响应式设计方法，可以创造最佳的用户体验，有助于提高用户的满意度。

1 关键技术

响应式设计从提出至今，一直不断蔓延扩散。随着响应式设计技术的不断发展，越来越多的门户网站将采用响应式网站设计方法。响应式设计的核心技术包含一下三个方面。

1.1 流式布局

传统的固定布局已经不适合如今用户采用众多设备上网的趋势，响应式设计避免了这种问题，采用流式布局的方法。

流式布局的核心就是将固定布局中以px为单位的左右固定宽度变成以%为单位的相对宽度。这里的%意味着宽度占其所在元素的百分比[5]。

1.2 媒体查询

媒体查询是响应式设计的核心之一，是响应式网站能对不同大小的设备做出响应的关键。媒体查询通常是以@media开头，之后紧跟的是一个或多个表达式。在创建媒体查询时，必须以媒体类型作为第一个表达式，例如：screen、print或者all等其它类型选项[6]。

1.3 图片的响应式设计

在网站设计中，图片包含两个部分，一是内容图片，它们拥有具体的意义，对于这些图片，设计的思路为：当视口宽度变小时，图像也变小，这样就不需要占用那么大的屏幕区域。可以通过将图像宽度设置为百分比，来使图像尺寸变得更加灵活[7]。并不是所有的图片都是内容的一部分，也可以添加一些装饰性的图像，可以增加网站的设计感。这些图片被称为背景图片，对于这些图片，通常按照突出重点的原则设置[8]。

2 实现

2.1 移动优先

移动优先是指设计界面时优先为小屏幕设计。从小屏幕宽度开始设计界面，将会迫使开发者关注网站内容的精华。这里的宽度是指视口宽度，所谓视口宽度是指屏幕上显示网站的区域，本文中提到的宽度都是指视口宽度。先为小屏幕设计布局之后，再将它变大时，将会有很多的空间用来继续添加内容，改变排版；如果先按照桌面尺寸进行网站设计，虽然这样做会令设计师感觉非常舒服，但当宽度变小时，适合桌面尺寸宽度的布局将会有大量的内容拥挤在小屏幕中，处理起来非常的麻烦。总之，小屏幕转化为大屏幕远比大屏幕转化成小屏幕要容易的多[9-11]。

2.2 设置视口

视口是计算机或设备屏幕上浏览网页的那块区域，在移动设备上，视口的宽度就是屏幕的宽度。通常情况下，移动设备访问未设置viewport属性的页面时，会遵从桌面浏览器的宽度，按比例缩小来适应手机的屏幕，浏览时还需要自行缩放，缩放的同时，还会出现滚动条，浏览非常不方便。对于响应式网站，希望能够按照移动设备真实的屏幕尺寸浏览页面[12]。所以，应该设置视口：

＜meta name="viewport"content="width=devicewidth,initial-scale=1" /＞

width=device-width告诉浏览器不管屏幕尺寸可能是多少都以全尺寸访问页面。所以，访问页面时，视口宽度就是设备的实际宽度，即100%。

属性initial-scale是告诉浏览器在屏幕上首次加载网页的时候如何缩放。initial-scale=1的意思是页面既不会放大也不会缩小[13]。

2.3 实现媒体查询

本文通过mqtest.io网站上获取具体信息，以结果作为断点。如图所示。

图1 平板电脑视口宽度Fig.1 The viewport width of IPAD

图2 手机视口宽度Fig.2 The viewport width of mobile

可以看出，平板电脑的最大视口宽度为64 em，手机的视口宽度为22.5 em所以断点设置为22.5 em、64 em。

@media only screen and (min-width: 64em) {/* css属性设置 */}

@media only screen and (min-width: 22.5em) and (max-width:64em) {/* css属性设置 */}

很多旧版本浏览器只支持css2版本的媒体查询，不支持css3版本的媒体查询，当浏览器运行到媒体查询这句话时，它们只能理解screen，不能理解and(min-width:65em)。浏览器本应该跳过它们不理解的语句，但是对于媒体查询，浏览器的运行方式有点不同，它们不是跳过整条语句，而是只跳过and(min-width:65em)。结果浏览器就会根据screen判断这句话是真的，就会导致该媒体查询应用于任何大小的屏幕上。为了避免这种情况，加入only这个词，能让那些旧版本的浏览器跳过这句话[14]。

2.4 背景图像设计

背景图像是作为样式应用于元素的，因此，它永远不会超出元素的边界，默认情况下，背景图像对齐与左上角，在实际中，背景图像中能给用户带来深刻印象的部分不一定在左上角，此时使用backgroundposition属性灵活设置对齐方向[15]。

footer{ background-image: url(Images/background 2.jpg); background-position: center;}

设置＜footer＞中的背景图像对齐于中间。

2.5 导航变换

在响应式设计中，有很多种导航变换方法，本文采用的是切换式推出型导航设计。所谓切换式推出型导航，即在默认情况下，导航菜单隐藏，当用户需要使用导航菜单时，点击图标，展开导航，同时菜单下拉时有过渡效果，具有层次感。这样节省了屏幕空间，使屏幕整洁，给用户带来更好的浏览体验[16]。本文通过对JavaScript的学习，完成导航变换。

图3 桌面页面footer元素样式Fig.3 The footer elements of the desktop page

图4 移动页面footer元素样式Fig.4 The footer elements of the mobile page

核心代码：

_createToggle: function () {

var toggle = document.createElement("a");

toggle.innerHTML = opts.label;

setAttributes(toggle, {

"href": "#",

"class": "nav-toggle"

});

if (opts.insert === "before") {

nav.parentNode.insertBefore(toggle,

nav.nextSibling);

} else {

nav.parentNode.insertBefore(toggle, nav);

}

navToggle = toggle;

}

这段代码作用为：在页面添加一个切换钮，并为其添加“href”、“class”属性。然后在此切换钮之前分配一个区域，此区域就是导航菜单的位置。再点击切换钮时，可以使切换钮随着导航菜单一并向下拉动，就像拉抽屉一样，切换钮相当于拉手，给用户带来更好的带入感。

resize: function () {

if (window.getComputedStyle(navToggle, null). getPropertyValue("display") !== "none") {

isMobile = true;

if (nav.className.match(/(^|s)closed(s|$)/)) {

nav.style.position = "absolute";

}

this._createStyles();

this._calcHeight();

} else {

isMobile = false;

nav.style.position = opts.openPos;

}

}

_createStyles: function () {

if (!styleElement.parentNode) {

styleElement.type = "text/css";

docu

ment.getElementsByTagName("head")[0].appendChil

d(styleElement);

}

}

_calcHeight: function () {

var savedHeight = 0;

for (var i = 0; i ＜ nav.inner.length; i++) {

savedHeight += nav.inner[i].offsetHeight;

}

var innerStyles = "." + opts.jsClass + " ." + opts.navClass + ".opened{max-height:" + savedHeight + "px } ";

if (styleElement.styleSheet) {

styleElement.styleSheet.cssText = inner-

Styles;

} else {

styleElement.innerHTML = innerStyles;

}

}

这端代码的作用为：判断是否为移动设备，如果是并且此时导航是隐藏状态的时候，设置导航位置样式为“绝对定位”。执行“_createStyles”以及“_calcHeight”方法。如果不是移动设备，则设置导航位置样式为openPos，即“相对定位”。

“_createStyles”方法作用为：为之前分配的导航菜单所在的区域创建新的样式表，并将其保存在＜head＞标签中。

“_calcHeight”方法作用为：将切换区域的导航菜单的自身高度相加，得到切换区域的高度。根据切换区域的高度设置样式并且动态的向“_createStyles”方法中创建的新样式表中插入。

_transitions: function () {

if (opts.animate) {

var objStyle = nav.style,

transition = opts.transition + "ms";

objStyle.WebkitTransition

=objStyle.MozTransition =objStyle.OTransition

=objStyle.transition = transition;

}

}

这段代码的作用是确定导航菜单下拉时过渡效果的执行速度，同时针对低版本Safari 、Chrome、Firefox、Opera浏览器的支持做出处理。如果不设置执行速度，网站也能运行，但是当用户点击切换钮时，导航菜单会瞬间全部出现在用户眼前。设置执行速度之后，导航菜单不会突兀的出现，能够给用户带来更好的视觉体验。

3 测试

将完成的网站分别在不同的设备上测试，最终效果如图所示。

图5 移动页面效果图Fig.5 The effect of mobile page

4 结语

在互联网技术的发展过程中，随着新设备的不断出现和更新，人们对于网站的浏览效果越来越重视。响应式设计今后会成为主流。本文对响应式设计进行了探索性研究，并初步设计了一个响应式网站，主要取得了以下研究成果：

（1）本文初步探索响应式设计的核心：流式布局、媒体查询、图片的响应式设计，了解响应式设计的方法，并设计了一个响应式网站。

（2）本文还探索响应式导航设计中的切换式推出型导航设计方法，利用脚本，成功完成。

图6 桌面页面效果图Fig.6 The effect of desktop page

图7 平板电脑效果图Fig.7 The effect of IPAD

[1] Peterson C. 学习响应式设计[M]. 文巍. 北京: 人民邮电出版社, 2015. Peterson C. Learning Responsive Web Design[M]. WEN W. Beijing: Posts & Telecom Press, 2015.

[2] 吕媛媛, 李可. 移动端应用设计中的响应式实现方法[J].软件. 2016, 37(2): 107-109. LU Y Y, LI K. Methods of Responsive Mobile Application Design[J]. Software. 2016, 37(2): 107-109.

[3] 张景安, 张杰, 卫泽丹. Android移动端浏览器的设计与开发[J]. 软件. 2014, 35(8): 7-10. ZHANG J A, ZHANG J, WEI Z D. Design and Development of the Mobile Client Browser on Android[J]. Software. 2014, 35(8): 7-10.

[4] 吴文种. 响应式动态网站建设的研究与应用[J]. 福建电脑. 2015(1): 105-106. WU W Z. Research and application of responsive dynamic website construction[J]. Fujian Computer. 2015(1): 105-106.

[5] 张超. 响应式网站的设计与开发[J]. 电子测试. 2015(16): 4. ZHANG C. The Design and Development of Responsive Website[J]. Electronic Test. 2015(16): 4.

[6] 戴慧萍. 响应式设计对网页界面的影响[J]. 艺术教育, 2015, 01: 250. DAI H P. The Influence of Responsive Design on Web Interface[J]. Art education. 2015, 01: 250.

[7] 苏奎, 董默, 张彦超. 响应式Web开发模式分析[J]. 软件. 2015(6): 92-96. SU K, DONG M, ZHNG Y C. A Review of Responsive Web Development Patterns[J]. Software. 2015(6): 92-96.

[8] 张幸芝, 徐东东, 贾菲. 基于响应式Web设计的教务系统移动平台研究与建设[J]. 软件. 2013(6): 5-7. ZHANG X Z, XU D D, JIA F. Responsive Web Design Based Educational Systems Research and Construction of Mobile Platforms[J]. Software. 2013(6): 5-7.

[9] 姜福成. 基于网页平台的移动文本编辑器的设计[J]. 软件, 2013, 34(5): 12-15. JIANG F C. Web-platform-based Movable Text Editor Design[J]. Software. 2013, 34(5): 12-15.

[10] 陈曦. 面向多设备响应式设计的机制研究[D]. 北京邮电大学, 2014. CHEN X. Study of Multi-device Responsive Design Mechanism[D]. Beijing University of Posts and Telecommunications. 2014.

[11] 臧进进, 鄂海红. 基于响应式Web设计的网页生成系统研究与实现[J]. 软件. 2015(6): 37-41. ZANG J J, E H H. Research and Implementation of the Web Page Generation System Based on Responsive Web Design[J]. Software. 2015(6): 37-41.

[12] 杨叶, 陈琳, 董启标. 响应式Web移动学习资源的技术实现与设计研究[J]. 现代教育技术, 2013, (6): 107-111. YANG Y, CHEN L, DONG Q B. The Design and Technical Implementation of Responsive Web Mobile Learning Resources[J]. Modern Education Technology, 2013, (6): 107-111.

[13] 黄莉婷, 黎传锦, 张净. 响应式网页设计在伯乐相马网的应用[J]. 科技视界. 2015(30): 152-153. HUANG L T. LI C J, ZHANG J. In response to application of web design in the first network[J]. Science & Technology Vision. 2015(30): 152-153.

[14] 张蕙. 浅谈网页界面设计思路与实现[J]. 软件. 2013, 34(1): 102-103. ZHANG H. On The Web Interface Design Ideas and Realization[J]. Software. 2013, 34(1): 102-103.

[15] 刘传军, 任钢. 基于移动互联网的山东消防移动指挥系统的设计和实现[J]. 软件, 2014, 35(11): 14-21. LIU C J, REN G. Design and Application of Shandong Fire Mobile Command System based Mobile Internet[J]. Software, 2014, 35(11): 14-21.

[16] 苟强强. 基于脚本指令的移动设备自适应机制研究[J]. 软件. 2014, 35(11): 1-4. GOU Q Q. Research on Mobile Device Adaptation System based on Script Command[J]. Software. 2014, 35(11): 1-4.

Research and Implementation of Website Based on Responsive Design

WU Kun1, WEI Dong-lan1, LI Jia1
(School of urban and Environmental Sciences, Liaoning Normal University, Dalian, Liaoning 116000, China)

With the development of mobile Internet and the continuous updating of mobile devices, people are more accustomed to using mobile devices to access the website. Designing specific website for each device is too expensive. Designing a website with good experience on any device is the key to the design and development of a website. This paper designed a news site. It can transform and adjust the layout according to the different devices through the study of the related technologies of responsive design and JavaScript. To achieve the purpose of good browsing experience on different devices.

Web design; Responsive design; Media query; Switch type push type navigation

TP393

A

10.3969/j.issn.1003-6970.2017.05.018

武昆(1994-)，男，硕士研究生，地理信息系统集成开发；魏东岚(1972-），男，副教授，地理信息系统集成开发；李家(1957-)，男，副教授，地理信息系统集成开发。

本文著录格式：武昆，魏东岚，李家. 基于响应式设计的网站研究与实现[J]. 软件，2017，38（5）：83-88