响应式Web设计研究

刘花伟

【摘要】 本文主要讲述响应式网站的优势及实现步骤。

【关键字】 响应式网站（RWD，responsive Web Design） 弹性布局

随着科技的飞速发展和智能手机及各种pad的普遍使用，原来针对电脑的单一的网页设计越来越跟不上时代的需求，响应式网页设计的需要越来越多。什么是响应式网页设计（RWD，responsive Web Design）？用简单的一句话概括就是：针对任意设备对网页内容进行完美布局的一种显示机制。下面针对公司做的几个响应式布局的网站，详细介绍一下响应式布局网站的优势及实现的相关步骤。

响应式web设计的优势主要有以下几点：

1、开发，维护，运营成本低。

因为页面只有一个，只是运用的css和js让它适应不同的设计。特别是一些公司的官网，经常更新维护，用响应式web设计，维护起来就简单的多。只需要修改一个页面就可以在不同页面终端显示相同的效果。拿花旗银行的官网来说，网站地址：https：//www.citibank.com.cn。假如客户要修改花旗礼享卡的文字介绍或者选项卡的内容，我们只需要找到相关内容修改一次就好，大大节省了维护成本。原来公司的官网有3个版本：pc版，mobile版和ipad版。算上每种版本都有中英文两个版本，网站的任何一次变动都需要修改6个地方，很不方便还容易出错。

2、兼容性优势。

现在科技日新月异，特别是移动端不时的就有新一代产品的出现。响应式布局在设计的时候已经充分考虑的这一点。不需要针对新出现机型做任何改变就可以完美的在新设备上显示正确的内容。

3、对用户友好，无需重定向。

原来针对每种机型做一套网站的做法，为了达到让用户无论通过什么设备都能访问到正确的网站的目的，一般采用的方法是在网站的首页进行设备判断，然后根据结果跳转到相应的网站URL，而有些检测代码就有可能在重定向的过程中丢失。响应式布局网站是一个URL，因此可以很好的解决这个问题。

下面着重讲解一下响应式布局网站的实现步骤和注意事项。

1、设计。

要想做响应式布局网站，设计很重要。一定要设计部门配合好才能设计出好的相应式布局网站。首先，要确定整个网站的布局结构，方便在各种规格的屏幕上显示；其次，确定网站中的图片显示方式，怎样让网站中的图片在各种屏幕尺寸下正确显示，并且不占用很多的下载流量显得尤为重要；最后，就是确定哪些内容在小的屏幕上是开始隐藏起来的，通过下一步操作才能看到全部内容。

还是以花旗银行的花旗礼享卡（链接：https：//www. citibank.com.cn/sim/ICARD/minisite/index_lix.html）为例。对比此页在各种终端的显示就可以看出，手机版和pc的最大的区别就是菜单导航变了，主导航变成左上角一个小按钮，屏幕的第二行是当前页面导航，同时也是二级菜单导航。这样方便用户进行下一步操作，也不占用很大的屏幕空间，从而可以腾出更多的空间显示当前页面的主要内容。其次，就是同样在重要位置上突出申请信用卡的banner的重要内容。最后，选项卡的内容则仅显示标题，如果用户喜欢相关内容，就可以通过点击查看更多内容。这样既保证了内容的完整性，又保证了页面的简洁性，两全其美。而ipad因为屏幕介于pc和mobile中间，因此内容显示和pc差不多，只是菜单框架参考了mobile。所以说设计很重要，从一开始就要考虑好各种屏幕的适应性。

2、开发实现。

如果设计的时候充分考虑到相应式布局的问题，那实现阶段就变得容易的多。首先，媒体查询（media Queries）是响应式设计的核心；它能使我们根据设备的功能来设定相应的样式。这样就可以保证在不同的屏幕终端都能正确显示所需要的内容。第二，弹性机制。这部分内容包括弹性的网格，弹性的容器，弹性的图片和视频等。在响应式布局的设计理念中所有的图片和容器大小最好是以百分数来表示的，不能用固定的像素来设置。当然还要考虑下载流量的问题。在小的屏幕上不仅要同比缩小图片，更要让用户下载小的像素的图片或者像素低的图片即响应式图片。第三，字体。以前的普通网页字体都是以px来作为度量单位的，这样在手机端的文字就会变得非常小。CSS3引用了一个新的单位叫rem，他和em类很像，但比em更容易使用。因为em是针对父级元素来确定自身元素的大小，而rem却是根据根元素来确定自身大小的。但是不要忘记一点就是在网页的开始重置根元素的大小。

3、耐心的测试和修改。

因为要匹配所有的终端，因此在网站制作完毕后一定要耐心细致的测试，找几个代表性的设备进行测试（当然不可能测试完所有的设备）。发现兼容性问题及时反馈处理，这样就可以使得上线后的作品可以给用户一个良好的体验。

总之，开发响应式布局网站，虽然在一开始设计和制作的时候比单独制作普通的网站花费更多的时间和精力，但是比起制作几套网站来还是轻松得多。因此现在应用十分广泛，随着技术的更新现在也出现了很多支持响应式设计的框架，运用好可以大大加快开发速度 。