响应式网页设计与实现_开题报告

（二）国外研究现状

蒂姆·伯纳斯李在1991 年制作并发布了第一个网站，如今刚刚过去21 个年头。在这21

年里，计算机和互联网快速发展，这个世界的面貌也日新月异。在这个过程中，网页设

计从无到有，从简单渐至专业，从可有可无变为广受关注。网页设计方法也在跟随时代

不断创新，从最初简单的文字排版，到表格布局，再到DIV+CSS，直到现在广为流行的

网格布局、流式布局等，设计师和开发者们一直致力于为全球网民提供更好的设计观感

和使用体验。

iOS 和Android 的发布，掀起了移动互联网的浪潮，智能手机、平板电脑、智能家电等新

设备层出不穷，我们的世界变得更加精彩纷呈。但这却给网页设计带来了新的挑战，在

面对形形色色的终端设备、千差万别的屏幕分辨率，以及良莠不齐的网络连接质量时，

目前的设计方法显得力不从心。我们无法预料用户的设备和网络状况，更不可能为每种

设备专门设计一套网站，那么在移动互联网时代，如何创新为用户提供更好的设计和体

验呢？

2010 年5 月25 日，伊桑·马科特发表在A List Apart 上的一篇文章，为我们打开了思路。

在这篇名为《Responsive Web Design》的文章中，伊桑·马科特将三种已有的技术整合在

一起，提出了响应式网页设计的概念，用以解决我们当前遇到的设计难题。响应式网页

设计概念一经提出就大受欢迎（当然也有争议），很多设计师和开发者纷纷实践并完善这

种理念。两年多的时间里，涌现出了越来越多的响应式网站，针对响应式设计的工具和

资源也日渐丰富。截至目前，响应式设计是使用一套代码为各类设备提供良好设计效果

和使用体验的最佳设计方法。

二、^范文提纲

伴随着互联网飞速发展的今天，网页设计也呈现出翻天覆地的变化，设计师们需要摸索一些新的技巧和方法来优化网页设计，此时伊桑·马科特提出的响应式网页设计将我们带入一个全新的设计领域，在CSS与HTML5的理论实践基础上（引用了Ben Frain 著、王永强译.响应式Web设计:HTML5和CSS3实战[M].人民邮电出版社.2013年1月1日第1版 中css与html5的实践），与用户的艺术审美需求相融合，使得响应式网页设计脱颖而出。

互联网时代的到来加速了网页的设计与开发，随着移动设备的不断更新，越来越多的屏幕分辨率、清晰度和设备的出现，对于网页的要求也越来越高，为每一种分辨率和新设备创建一个网页版本是不切实际的，如何解决这些问题呢？2010年伊桑·马科特（Ethan Marcotte）创造性地提出了响应式网页设计（Response Web Design）以此来解决这些难题，《响应式网页设计》将流动布局、弹性图片和CSS媒体查询三者结合构成响应式网页。

响应式网页设计从开始提及到现在仍不断发展创新，越来越多的人们被响应式网页设计所吸引，同一个网站能够更好更快的响应不同尺寸的设备，让我们看到了网页发展的契机，推崇响应式网站是目前网页设计发展的新趋势。 

那么什么是响应式网页设计？响应式源于响应式建筑设计的概念，是指一个空间根据人的行为自动调整空间环境。响应式网页设计根据用户使用设备环境，将一个网站在小屏幕手机与桌面电脑之间进行网页界面的切换。即将三种已有的开发技巧：流动布局、弹性图片、CSS媒体查询突破性的整合而成。（引用看卡德莱茨 (Tim Kadlec) 著、侯鸿儒译.响应式Web设计实践.人民邮电出版社[M].2013年3月1日第1版，流动布局、弹性图片、css媒体查询）其实质是网页可以自动响应用户设备，完美的呈现出相应的网页布局。该设计和开发根据用户的行为和环境进行响应，即屏幕的大小、设备平台和使用方向来做出响应。

然而在响应式网页出现以前，以固定宽度为主的页面布局使大多数网站存在一些问题，那么响应式网页设计的优化体现出以下几个方面： 

1、不同终端设备的出现，如智能手机、平板电脑等这些设备存在不同屏幕尺寸的问题，且新的屏幕尺寸设备的不断研发，在大小、功能甚至分辨率上都会发生变化。当用户从便携式电脑切换到ipad时，响应式网页即刻切换到相应的分辨率、图片尺寸和脚本。换言之，即网站能够自动响应用户的设备参数。拥有这样的响应式网页便无需对市场上每一种新的设备都进行不同的设计和开发。  

2、各种操作系统的出现，如Windows、Android、IOS等系统，它们之间相互兼容，解决跨浏览器的问题。现如今全球手机浏览器的使用量逐年上升，IE7的使用率不断下降。响应式设计能够根据用户的浏览器版本，既保证老版本的可响应性，又为高分辨率显示器提供相应的页面内容，使用户体验得到最佳效果。  

3、桌面版浏览器满足不同视口大小、旋转方向的需求。现在许多用户没有最大化他们的浏览器，对于屏幕本身有太多可调整的空间，如将浏览器视口调小，那么网站的布局就不能完整的呈现出来。随着iPhone、ipad和智能手机的流行，许多新的设备能够根据用户的行为在竖屏和横屏之间进行瞬间切换，而固定网页布局已不能适应众多设备的考验，但响应式网页能够根据不同视口（引用了邢希、田兴彦、王世运.响应式Web设计方法的研究[J].琼州学院学报，2013（2）：36～38 中响应式网页可适应不同的视口），为现有及将来的各种设备做出快速响应，呈现出完整的页面布局。

了解响应式的同时，我们就会提出如何实现响应式网页设计： 

1、在丹·锡德霍姆（Dan Cederholm）编写的《无懈可击的Web设计》一书中，伊桑·马科特为其撰写了一章关于流动布局的内容。在书中，他提出了一个标准化的公式即“目标元素宽度÷上下文元素宽度=百分比宽度”。

2、CSS媒体查询的使用，其中min-width和max-width这两个属性值的设定，（引用了德[Smashing Magazine]著、李景媛、吴晓嘉译.众妙之门—精通CSS3[M]. 人民邮电出版社. 2013年5月第1版 中的css3的min-width和max-width这两个属性）可以调节网页响应不同浏览设备的宽度范围，可以在设备屏幕宽度高于这个值的情况下，为页面指定一个特定的样式表，利用CSS媒体查询支持不同的视口大小匹配CSS样式。

3、弹性图片的应用：响应式网页设计中一个需要解决的问题是怎样使用图片进行工作。最流行的方法是使用CSS的max-width进行简单的修复，该方法在伊桑·马科特关于流动的图片的文章中提到过。以上这三个方面是如何实现响应式网页设计的关键。（引用了 王愉、潘明明.响应式网页设计初探[J].北京印刷学院学报，2014（3）：13～15 中的实现方法）

随着移动无线网络数据的提速，移动设备已成为人们上网的主要方式，不断推出的移动产品改变了用户使用小屏幕设备上网的习惯，这些设备上的浏览器在设计时会考虑到如何显示现有网页。（引用了 游琪.响应式网页设计在移动互联网中的应用[J].计算机光盘软件与应用，2014（14）：293～294 移动互联网）手机浏览器会将一个标准网页缩小到最小视口，然后用户在自己感兴趣的内容区域上放大浏览。这样看起来已经很好，但是作为前端设计师为什么还要在这上面继续优化呢？（引用了 张欣辉.响应式网页设计的研究[J].电子技术与软件工程，2014（18）：57 移动产品的快速发展）

首先，网站可以更少的维护。一个响应式网站的维护成本较少，在所有类型的设备上只需要一个网站工作便可，这已经在很大程度上减少了网站开发的工作量。而开发一个独立的移动网站，实际上是拥有了两个独立网站，那么需要两个网站的维护量，也有可能造成网站数据的不同步。（引用了林瀛瀛.响应式设计技术在视频网站开发中的应用[D].东华大学，2014：2～3 网站维护）

其次，不需要另外的域名。原本固定式的网页需要建立桌面版和移动版两个网站，而使用响应式网站则只需一个网站。对于一家企业网站，为了提高用户体验度，不仅要注重桌面用户端的体验，更要加强对移动用户端的网页设计，目前移动用户访问网站的数量不断增长，移动网站页面布局关系到企业形象与销售额，如果拥有一个响应式网页设计，那么这些问题便可以迎刃而解。

响应式网页设计为我们打开了新思路，运用已有的流动布局、弹性图片和媒体查询技术其实并不新颖，而伊桑·马科特将这三者结合应用到界面设计中是非常具有开造性的。我相信在多屏设备发展的今天，响应式网页代替固定式网页设计已成为一个新趋势。

三、参考文献[1]Ethan Marcotte.Responsive Web Design[M].3. [2]FrainB.Responsive Web Design with HTML5 and CSS3[M].Birmingham：Packet Publishing，2012：3. 

[3]卡德莱茨 (Tim Kadlec) 著、侯鸿儒译.响应式Web设计实践.人民邮电出版社[M].2013年3月1日第1版 

[4] Ben Frain 著、王永强译.响应式Web设计:HTML5和CSS3实战[M].人民邮电出版社.2013年1月1日第1版 

[5]德[Smashing Magazine]著、李景媛、吴晓嘉译.众妙之门—精通CSS3[M]. 人民邮电出版社. 2013年5月第1版

[6]邢希、田兴彦、王世运.响应式Web设计方法的研究[J].琼州学院学报，2013（2）：36～38 

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

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

[9]游琪.响应式网页设计在移动互联网中的应用[J].计算机光盘软件与应用，2014（14）：293～294 

[10]林瀛瀛.响应式设计技术在视频网站开发中的应用[D].东华大学，2014：2～3