响应式网页设计

什么是响应式Web设计？

“响应式Web设计”这个名字是Ethan Marcotte在2010年发明的。当时，他在A List Apart上写 了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），这篇文章综合运用了三种 已有技术（弹性网格布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫“响应式Web 设计”。 ——《响应式Web设计HTML5和CSS3实战》
响应式网站设计(Response Web design，简称RWD)是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。——百度百科

通俗一点，响应式web设计可以检测到用户的设备尺寸、系统平台（到底是苹果的呢？还是安卓的呢？还是其他。）还有屏幕定向，它会根据不同的情况显示出不同的内容页面排版。
它就像是水一样，你将它装在水壶里，那么它就是它就是水壶的样子，你将它装在杯子里，那么它就是被子的样子，它将它放在盆子里，那么它就是水盆的样子……无论你用什么设备打开，它总会以合适的样子出现在你的眼前。

• RWD的三种组成科技
  • 弹性网格布局
    默认情况下，网页布局是弹性的。也就是说你打开一个页面，缩放浏览器窗口，你会看见文本会根据屏幕缩放自动重排。以iphone手机为例，iOS会默认会按照980像素宽度来渲染（或者叫排版？）网页，然后再把页面缩小呈现在视口当中。浏览器中用于呈现网页的区域叫视口（viewpoint）。视口并不等于屏幕的大小，特别是可以缩放浏览器窗口的情况下。在这种情况下网页往往会是等比例的缩小，文字一般是较小的字号，用户的使用体验较差。但是RWD的弹性网络布局根据屏幕大小的不同，针对屏幕的大小对网页的文字重新编排，达到便于用户浏览、使用的结果。
  • 弹性图片/媒体
    在没有RWD情况下，网页往往会按照之前图片原本的像素展现在视口前，有的时候会图片的像素过大，我们会看到整个屏幕“塞不下”这张图片的结果，但是RWD的弹性图片效果可以根据我们用户使用的不同屏幕尺寸改变图片的像素，从而达到屏幕能够“塞下”这张照片并且便于我们浏览的结果。
  • 媒体查询

  媒体查询可以让我们在某些条件下（如宽度和高度为多少的情况下）为网页应用样式——《响应式Web设计HTML5和CSS3实战》
  使用媒体查询，你可以针对不同的媒体类型定义不同的样式。
  媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，媒体查询是非常有用的。
  当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。——RUNOOB.COM

RED中的前端与后端的关系？

前端，我们简单粗暴点往往对应的是网页设计师；而后端我们对应的是网页开发者，也称程序员。

Web前端:
顾名思义是来做Web的前端的。这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
Web后端：
后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

我们为什么需要响应式网页设计（RWD）？

以往响应式web设计并不能检测到用户的设备环境，只能是按照后端程序员所设定的样子，显示出所限定版面，在一定的程度上影响了用户的使用的感受。又或者是后端准备好几套的方案，一套是给电脑用的，一套是给苹果用得，一套是给安卓用户用的……这样的工作量是十分庞大的，而且多套方案的做法难以应对不断发展的，不断生产出新事物的网络世界。

2016年全球手机、手提、台式电脑市场份额.jpg

在以往，网页所面对的受众大部分是手提电脑、台式电脑，近年来移动端的高速发展，让生产者不得不重视手机用户的使用体验，而在2016年10月、11月前后，手机移动端超越手提电脑占据着大部分的市场份额。

2017.2-2018.2全球移动设备供应商的市场份额.jpg

移动端的蓬勃发展同样吹生了响应式web设计的出现于发展。

RWD的优越所在

以移动端为例

某中学网站.jpg

上图为某中学的官网，使用手机打开其网站，网面留下了大部分的空白，给用户带来一定的使用难度的同时，美观的程度也大大减低。

中山大学官网.jpg

上图为中山大学官网的截图，与上面某中学的页面形成鲜明的对比。大小适中，同时也提高了用户的使用质量。