在你身上是否发生过如此一件事，就是在你休息的时间用浏览器最大化的看一些文章、玩一些网页游戏正入迷的时候，时间一点点的过去了，马上到了下午工作的时间了，却发现还差一点就看完，于是乎，你把浏览器缩小了一些尺寸，瞬间，网页进行的重组，最后你发现你想看的内容就这样消失了，或是以一种难以阅读的方式呈现在你面前。这时你会希望，这要是响应式Web设计…该多好。

现今，无论是移动设备还是平板电脑亦或是PC屏幕，都有着各异的屏幕大小，若是针对每个屏幕大小单独设计一个解决方案会显得如此的繁琐和笨拙。响应式Web设计的概念就是可以让网页根据用户的使用环境进行自动调整，并有效的解决掉了用户体验度这一问题。

如此一说，响应式Web究竟是现今的大势所趋，还是因为各种设备的产生而诞生出的一种时代产物呢？下面，我们先了解一下响应式设计。

传统网页如何变成响应式

响应式Web设计已经成为目前主流的设计模式，那么对于那些以前固定好宽度和像素的页面来说，很多人都在想应该如何让它实现响应式？是否要进行网页的重构？那么传统网页如何变成响应式设计呢？51CTO的记者从采访中了解到，在传统的web设计中，就提倡在CSS文件里将页面的布局、颜色、字体设计等分开，如果在当初进行设计时遵守了这一原则，那么在响应式web设计中，只需要更改页面布局这一部分的CSS内容即可。对于固定好宽度和像素的页面，也只需要按比例换算成百分比模式便可。

响应式Web设计的基本原理就是宽度使用百分比制以及利用CSS3 Media Queries语句事先设定各种分辨率下的页面布局。相当于对同一个网页，设计师要进行好几份设计（例如宽屏下的三栏设计、普通屏幕下的两栏设计以及移动设备上的单栏设计等）。但现在似乎还没有一个比较统一的CSS框架或设计模式来减少CSS设计师的工作量。

对于是否需要进行页面重构，这就需要看网页在“裸奔”情况下是否可以有序的展示，如果在CSS无效的情况下网页无法有序地展示内容，那么是必须重构的，其实这跟是否进行web响应式设计无关，是对页面结构的最基本要求。

一般而言，出于展示的原因，移动设备可能不太适合诸如内嵌网页地图等元素，这就需要在CSS文件里面做相应的屏蔽设置。另外，若从用户的手机流量方面考虑的话，大页面最好还是进行重构，以减小用户向服务器请求的数据量。因为过大的数据请求一方面会增加用户在手机流量上的开销，更重要的一方面会降低页面的加载速度，导致移动设备的用户体验变差。

浅谈响应式Web设计的用户体验

一个网站若是没有一个良好的用户体验度，那么就算里面的内容在诱人，也无心阅读下去。响应式Web设计虽然可以合理的呈现给我们想要阅读的内容，但并不是将整个网页完美的缩放给我们，对于那些没有呈现出来的内容，我们是否也需要加载出来？这样对于移动设备来说是否也是一种弊端呢？

51CTO的记者通过采访中了解到鉴于移动设备屏幕大小的限制，在其上进行显示的内容一般是经过精心筛选的，过多的内容会使页面看起来杂乱不堪，用户也很难找到自己想要的东西，比较好的做法是留下少部分最重要的内容直接进行展示，其余的部分可以先隐藏起来，用户点击时再展开，这样信息都保留在了页面上，但是不会一次性的全都推到用户面前，用户可以按需索取想要了解的内容。对于移动设备流量上的考虑，最好还是设计成ajax模式，而不是预先加载过多的页面数据，这样可以节省很大一部分的流量。

支持响应式Web设计的条件

响应式设计之所以会产生是由于新出现的各种设备（如智能手机、Pad、Tablet、宽屏电视、普通电脑显示器等）的浏览器（或浏览器模块，如android系统的webView等）支持对CSS3 Media Queries的解析。

响应式Web设计或许还是无法普及到传统的非智能手机，但是对于采用主流移动OS的手机都是可以支持的。看到这里我们就会想一个问题，未来是否会出现一种新的设备，是响应式Web设计无法实现的？其实对于将来的新设备，只要其中的浏览器支持CSS3特性，那么它依然可以支持响应式Web设计。

响应式Web设计究竟是大势所趋还只是时代的产物？

响应式Web设计是在展示设备日趋多样化这一背景下产生的，可以预见，只要设备生产厂商一日不统一，响应式Web设计就会一直发展以满足不同规格设备的页面展示，如此看来确实给我们呈现出一种时代产物的感觉。

但对于未来几年内不断发展的移动设备、电脑设备、平板设备，若是没有响应式Web设计谁知道我们谁会知道究竟还要开发多少个不同的页面。并且说道大势所趋，我们就不得不想到和响应式Web设计比较紧密且十分火热的HTML 5 了，HTML5可以用来做一些很酷的Web应用。而响应式web设计利用CSS3的特性可以弹性布局页面上的元素，对HTML5开发的Web应用而言是一大助力。虽然和HTML 5 一样，响应式Web设计还没有得到很好的普及，但两者皆已成为一种趋势，就让我们拭目以待的看他们会为我们带来什么样的惊喜吧。

原文：响应式Web设计是大势所趋还是时代的产物