初识响应式Web设计

       响应式Web设计，就是根据用户终端来决定前端页面的显示规则，即完成了一种对用户终端具体情况的灵活响应的设计理念。

       当下，移动端Web已经逐渐占据了Web市场，PC市场的渐退使得响应式Web设计早已成为了热门的话题。响应式，主要在这里，笔者认为还是屏幕尺寸和屏幕分辨率占据主导的相应条件，其次才考虑标签和浏览器的兼容性响应等问题。

       响应式Web设计所要解决的就是不同的前端设备之间显示同一个页面能够得到不同且适合的浏览效果，并且能够在其之间进行平滑的过渡，保证用户体验。

       下面引用网友【葡萄城控件】的博客内容来初识响应式Web设计：

        

       Web发展迅速，各种应用和服务层出不穷，现在打开电脑，可能使用最多的程序应该是浏览器了，访问不同的网站，可以满足人们购物，社交，获取新闻资讯，娱乐，等等需求。然而近几年内，移动设备快速崛起，移动互联网慢慢进入人们的生活，预计未来5年内移动设备的使用度会超过桌面计算机。所以需要您的网站不仅要在桌面计算机大尺寸屏幕上可以为用户提供友好的UI和用户体验，同时在小尺寸屏幕上也应该可以提供一致的用户体验。使得用户可以在桌面大屏幕上和移动小屏幕上平滑的切换使用，同时没有任何的不适应感觉。

(移动设备趋势：http://www.webhostingbuzz.com/blog/2011/10/19/mobile-internet-trends/)

       要网站在桌面大尺寸屏幕上和移动小尺寸屏幕上提供一致的用户体验，最直接的方法就是为每种设备及分辨率制作一个网站或者特定的页面，使得移动用户在这些页面里取得平滑友好的用户体验。但是到底有多少不同的移动设备和屏幕分辨率呢?这种方法需要投入多少成本能?

(早先的数据：2005至2008年市场中的400余种移动设备的统计情况

http://www.quirksmode.org/mobile/mobilemarket.html)

      这份统计结果已经比较早了，随着时间的推移，又有很多移动设备投入市场，为每种设备及分辨率制作一个网站或者特定的页面，这应该是比较大的工作量，是比较耗时耗费资源的。是否可以只做一个网站一套页面，既满足桌面大尺寸屏幕，同时也可以满足各种不同移动设备的小尺寸屏幕。

因为有了这个问题，才有了响应式Web设计这种方案：一个网站能够兼容多种移动设备屏幕尺寸，而不是为每种屏幕尺寸做一个特定的版本。这个概念可以说是为移动互联网而生的。国外已经有一些这样的应用例子了,如:http://foodsense.is/， 此网站在Android 上的效果：

       不采用响应式Web设计 news.sina.com.cn 在Android上的效果，需要用双指进行缩放才能友好浏览：

        foodsense.is 在其它设备分辨率下的情况:

(iPad1/2 1024X768 横向)

(iPad1/2 1024X768 纵向)

(iPhone4 320X480 横向)

(iPhone4 320X480 纵向)

（ASUS Galaxy 7 480X800 纵向）

       foodsense.is 可以在各种设备分辨率下，根据分辨率的不同做出响应，对菜单和图片进行重新布局，来满足显示的需要。这种技术就是响应式Web设计，这个概念是Ethan Marcotte在A List Apart发表的一篇文章"Responsive Web Design" (http://www.alistapart.com/articles/responsive-web-design/) 中援引响应式建筑而得名的: “响应式建筑(responsive architecture)，物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构,还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产"智能玻璃"：当室内人数达到一定的阀值时，这种玻璃可以自动变为不透明，确保隐私。” Web借由建筑上这个概念，当设备分辨率发生变化时，根据设备分辨率，调整菜单，图片，文字，等其它页面DOM的状态和布局，使得页面仍然可以给用户提供友好的使用体验。

       引用过上面网友关于响应式Web开发的介绍，下面就来引用网友【freshman007】介绍的几种响应式Web设计中的基本原则：

响应式设计 vs 适应式设计

看似相同实则不然。这两种设计方式彼此相辅相成，所以说也没有对错之分。具体情况要依内容而定。

内容流

随着屏幕尺寸越来越小，内容所占的垂直空间也越来越多，也就是说，内容会向下方延伸，这就叫做内容流。如果你习惯了使用像素和点进行设计，可能会觉得这个有点难掌握。不过没关系，习惯了就很好理解了。

相对单位

你的设计对象可能是台式桌面，也可能是移动端屏幕或者介于两者之间的任意屏幕类型。像素密度也会彼此不同，所以我们需要使用灵活可变，并且能够适应各种情况的单位。那么在这种情况下，百分比等相对单位就派上用场了。使用百分比时，我们说宽度50%就是表示宽度占屏幕大小（或者叫视区，也就是指所打开浏览器窗口的大小）的一半。

断点

断点可以让页面布局在预设的点进行变形，也就是说，在台式桌面上显示3栏，在移动设备上仅显示1栏。大多数CSS属性都可以实现断点之间的变形。断点放置的位置通常取决于内容。比如，如果一句话要换行，你可能就需要加上断点。但断点使用时需要谨慎——如果搞不清内容之间的逻辑关系，很容易弄的一团乱。

最大和最小值

有时候内容占满整个屏幕宽度（例如在移动设备上）是好事，但如果相同的内容在电视屏幕上也撑得满满的，貌似就不太合理了。这就是为什么要有最大/最小值。例如，如果宽度为100%，最大宽度1000px，那么内容就会以不超过1000px的宽度填充屏幕。

嵌套对象

还记得相对位置吗？如果一大堆要素彼此都紧密联系，那么必将难以控制。因此，将要素放置到容器中就会让它们变得更加好理解，并且简洁明快。这种情况就需要用到像素之类的静态单位了。静态单位对于logo和按钮等不需要扩展的内容来说非常有用。

移动优先还是台式桌面优先

严格来说，项目从小屏幕入手过渡到大屏幕（移动优先），还是从大屏幕入手过渡到小屏幕（台式桌面优先）区别不大。但是，从移动端着手可以给你带来一些额外的限制，帮助你进行决策。通常情况下大家会从两方面同时着手，所以你还是要看哪种方式最适合你。

Web字体 vs 系统字体

想让自己的网站拥有炫酷的Futura或Didot效果吗？那就是用web字体吧。尽管web字体看起来很炫酷，但你要记住，这些字体都需要用户下载，字越多，用户加载页面的时间也就越长。另一方面，系统字体加载速度则快得多（前提是用户本机就有），但太过普通。

位图 vs 矢量图

你的图标是否有很多细节，并且应用了很多华丽的效果？如果是，那就用位图。如果不是，考虑使用矢量图。如果是位图，使用jpg、png或gif。矢量图则最好使用SVG或图标字体。其各有利弊。但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。另一方面，矢量图通常比较小，不过部分比较老的浏览器可能不支持矢量图。还有，如果图标有很多曲线，那有可能会比位图还大，所以要明智取舍。

//引用内容来源于csdn.net网友博客内容：

http://blog.csdn.net/powertoolsteam/article/details/7622465

http://blog.csdn.net/freshman007/article/details/44809081