响应式网页设计

响应式网站设计(Responsive Web design)是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

响应式布局是Ethan Marcotte 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。(文章网址：http://alistapart.com/article/responsive-web-design)

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

为何需要"响应式网页设计"?

statcounter数据

Windows 10已经在几个月前超过了Windows 7，成为世界上排名第一的台式机操作系统，现在下一个里程碑是达到50%的市场份额。根据StatCounter的数据，这不应该花太长的时间，因为Windows 10市场份额在2月份稳定增长，这很可能是由于微软完成了秋季创作者更新的推出。目前，Windows 10在全球的43.54%的个人电脑上运行，而Windows 7则是41.55%，其他Windows版本远远落后，例如，Windows 8.1仅占全球PC的8.53%。

而造成这个变化趋势的主要原因是响应式网页设计，如今，越来越多的用户使用智能手机和平板电脑上网，响应式设计网站似乎是最简单也是迄今为止唯一一种可以在任何设备上定位受众，并提供无缝对接、精彩内容的方式。实际上，响应式网站已变得日益重要，因为现今大多数人出于各种原因都在使用多种设备（尤其是平板电脑和智能手机）浏览互联网。

Food Sense.jpg

Food Sense（网址：http://foodsense.is/）,这是一个普通的左侧博客风格杂志布局加上众多美味图片充斥的一块一块的布局的网站，这个网站展示了它是如何转化和适应不同分辨率的，并让用户看起来这些网站是同一个网站。

然而，并没有什么一致的网页布局规律，这个是公认的典型解决方案，用来吸引移动网络的在线读者，赢得了新的用户。与此同时，网站解决了视觉过载的美学问题。

RWD的三项组成科技

弹性网格布局

大约公元20世纪90年代末，网站的宽度大都以百分比形式定义。 百分比布局使得网页宽度能够随着查看它们的屏幕窗口大小变化，因而得名弹性布局。默认情况下，网页布局是弹性的。就它现在这个样子把它打开（还不包含媒体查询），缩放 浏览器窗口，你会看见文本会根据屏幕缩放自动重排。

2015年，我们有了写响应式网站的更好的手段。CSS推出了一个新的布局模块叫“弹性盒子” （Flexbox），已经有很多浏览器都支持，可以在日常开发中使用了。
除了用于实现弹性布局，Flexbox还可以用来居中内容，改变标记中的源码顺序，创建令人 惊艳的页面布局。

弹性图片/媒体

弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。
浏览器会根据屏幕的宽度和我们声明的图片的尺寸描述符去决定应该使用哪张图片，但是呢，因为我们浏览器已经在大的分辨率下加载了大的图片，那么浏览器会默认你的图片已经放在缓存中了，使用大的图片不会再有网络的消耗，那么当然是使用更大的图片更好的了，所以在我们再缩小屏幕的时候浏览器不会再去使用小图片了，这是浏览器的一个默认的行为。

媒体查询

CSS3规范分成很多模块，媒体查询（3级）只是其中一个模块。利用媒体查询，可以根据设 备的能力应用特定的CSS样式。比如，可以根据视口宽度、屏幕宽高比和朝向（水平还是垂直） 等，只用几行CSS代码就改变内容的显示方式。

CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。翻开W3C 的CSS3媒体查询模块的规范（https://www.w3.org/TR/css3-mediaqueries/），可以看到官方给媒体查询下的定义：
“媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width、height和 color都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页 适配不同的设备。”

近几年，随着行动装置（智慧型手机、平板）的普及，以及行动上网服务的使用率越来越高，传统网页的标准已经无法符合这些装置的需求来呈现了，尤其是以flash制作的动画，受限于行动装置运算力不足的限制之下，已经没有行动装置可以直接浏览flash制作的网页了。虽然可透过一些特殊的浏器APP软件来观看，但方便性却大大的降低。

而RWD又是如何达到的呢？

主要是以HTML5的标准及CSS3中的media queries来达到的。

在HTML5的标准中，我们可以指定页面的宽度可以依照装置的检视宽度来呈现，再利用CSS3的media queries来设定不同宽度下使用不同的CSS来呈现页面。因此设计师在设计网页时，就必须要针对不同的宽度下的画面编写不同的CSS档案供浏览器来读取。

RWD的优点：

1.可使用同一套原始码来撰写CSS，可以减少版面重新制作的时间。
2.可同时针对不同的分辨率来设定，增加页面的可用性。
3.对于搜寻引擎的收录不会造成影响，不影响SEO的结果。
4.开发时间较APP来说可以快速很多。
5.学习门坎较低，对于已经从事网页设计的人员来说，此技术只是建构在原本的DIV+CSS之上的一门技术，因此学习起来相对容易。

RWD与前端、后端的关系

Web前端:顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

简单来说，前端开发者(Frontend Developer)所做的就是开发产品的前端，所谓的 应用产品的前端就是用户看到，接触到和体验到的，他们主要做静态用户界面加上一些动态效果，不涉及数据逻辑，前端考虑到的是用户体验，而后端开发者（Backend Developer）就不一样了，他们是在后台工作的，控制着前端的内容，主要负责程序设计架构思想，管理数据库等。 下面这张图就能很形象的表述这个的问题：

前端与后端.jpg

最生动的例子就是网站的登陆界面，在一个网站登陆页面： 前端只要需要负责静态页面部分 ，鼠标移入输入框、移出输入框的颜色变化这部分的内容；但是输入用户名、密码 后登录系统的话要连接数据库，这个就需要后台开发做逻辑处理了！

参考文献：百度、搜狗、CSND等等