浅析响应式网页设计的实现与优化

张聪聪

（中南民族大学 美术学院，湖北 武汉 430074）

浅析响应式网页设计的实现与优化

张聪聪

（中南民族大学 美术学院，湖北 武汉 430074）

伴随着互联网的飞速发展，网页设计也呈现出翻天覆地的变化，设计师们需要摸索一些新的技巧和方法来优化网页设计。伊桑·马科特提出的响应式网页设计将我们带入了一个全新的设计领域，在CSS与HTML5的理论实践基础上，与用户的艺术审美需求相融合，使得响应式网页设计脱颖而出。

网页设计；响应式；媒体查询

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

那么什么是响应式网页设计？响应式源于响应式建筑设计的概念，是指一个空间根据人的行为自动调整空间环境。响应式网页设计根据用户使用的设备环境，将一个网站在小屏幕手机与桌面电脑之间进行网页界面的切换。即将流动布局、弹性图片、CSS媒体查询突破性地整合而成。其实质是网页可以自动响应用户设备，完美地呈现出相应的网页布局。该设计和开发根据用户的行为和环境进行响应，即根据屏幕的大小、设备平台和使用方向来作出响应。

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

第一，不同终端设备的出现，如智能手机、平板电脑等设备存在屏幕尺寸不同的问题，且新的屏幕尺寸设备的不断研发，在大小、功能甚至分辨率上都会发生变化。当用户从便携式电脑切换到ipad时，响应式网页即刻切换到相应的分辨率、图片尺寸和脚本。

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

第三，桌面版浏览器满足不同视口大小、旋转方向的需求。现在许多用户没有最大化他们的浏览器，而屏幕本身有太多可调整的空间，如将浏览器视口调小，那么网站的布局就不能完整地呈现出来。随着iPhone、ipad和智能手机的流行，许多新的设备能够根据用户的行为在竖屏和横屏之间进行瞬间切换，响应式网页能够根据不同视口，为现有及将来的各种设备作出快速响应，呈现出完整的页面布局。

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

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

其次，CSS媒体查询的使用，其中min-width和maxwidth这两个属性值的设定，可以调节网页响应不同浏览设备的宽度范围，可以在设备屏幕宽度高于这个值的情况下，为页面指定一个特定的样式表，利用CSS媒体查询支持不同的视口大小匹配CSS样式。

再次，是弹性图片的应用。使用CSS的max-width进行简单的修复，该方法在伊桑·马科特关于流动的图片的文章中提到过。

随着移动无线网络数据的提速，移动设备已成为人们上网的主要方式，不断推出的移动产品改变了用户使用小屏幕设备上网的习惯，这些设备上的浏览器在设计时会考虑到如何显示现有网页。手机浏览器会将一个标准网页缩小到最小视口，然后用户在自己感兴趣的内容区域上放大浏览。这样看起来已经很好，但是作为前端设计师为什么还要在这上面继续优化呢？

首先，网站可以更少进行维护。一个响应式网站的维护成本较低，在所有类型的设备上只需要一个网站工作便可，这已经在很大程度上减少了网站开发的工作量。而开发一个独立的移动网站，实际上是拥有了两个独立网站，那么就需要两个网站的维护量，也有可能造成网站数据的不同步。

其次，不需要另外的域名。原本固定式的网页需要建立桌面版和移动版两个网站，而使用响应式网站则只需一个网站。

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

［1］卡德莱茨（Tim Kadlec）.响应式W eb设计实践［M］.侯鸿儒 译.北京：人民邮电出版社，2013.

［2］Ben Frain.响应式W eb设计:HTM L5和CSS3实战［M］.王永强 译.北京：人民邮电出版社，2013.

［3］［德］Smashing M agazine.众妙之门—精通CSS3［M］.李景媛，吴晓嘉 译.北京：人民邮电出版社，2013.

张聪聪，女，汉族，中南民族大学美术学院，设计艺术学2012级研究生。

TB472

A

1007-0125（2015）03-0166-01