RWD响应式网页设计

响应式Web设计(Responsive Web Design)：
即网页内容会随着访问它的视口及设备的不同而呈现不同的样式。它随着上网设备屏幕之间的差距不断拉大而产生，它既能有效应对不断扩展的浏览器与设备，也可以让一个网站同时适配多种设备和多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小，输入方式，设备or浏览能力）而变化，同时，它并不依赖于服务端或后端方案。

视口（viewport):
视口是与设备相关的一个矩形区域，坐标单位是与设备相关的“像素”，大多数情况下，视口与客户区相同。在CSS标准文档中，视口viewport被称为初始包含块。这个初始包含块是所有CSS百分比宽度推算的根源，它给CSS布局限制了一个最大宽度。在桌面上，视口的宽度和浏览器窗口的宽度一致。而在移动端，视口分为布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)。

设置（device):
决定屏幕分辨率，宽度等一切可调控网页呈现形式的程序。

样式(style):
一种改变所有 HTML 元素的样式的通用方法。样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

元素（element):元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

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

statcounter_20180312174826.png

statcounter._20180312174540.png

以上述数据来举例。在2016年的中国网民上网记录里，将近一半的网民选择了Chrome浏览器，但与此同时，也有相当多的用户选择了UC浏览器，QQ浏览器等，不同的浏览器背后是由不同的工作团体来操作使其程序得以运行，这就有了设备以及屏幕显示上的不同，随着市场竞争力的不断增大，各种上网设备屏幕之间的差距也在不停地拉大，为了让用户能够拥有更友好的使用环境而不用一味地依赖服务端或后端方案，响应式设计就i应运而生，适时地解决了以上可能出现的种种问题。

网易云音乐截图_20180312181157.png

网易云音乐采用了响应式设计 http://music.163.com/

B站_20180312192331.png

没有采用响应式设计的B站 https://www.bilibili.com/

RWD的三项组成科技
响应式网站设计有三个关键组成部分：1. 媒体查询; 2. 流动网格；3. 弹性图片。
媒体查询(media query):基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。
流动网格(Fluid Grids):流动网格采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小。
弹性图片（Flexible Images）：图片大小采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。
(该部分内容摘自http://www.passquan.cn/services/responsive-web-design)

RWD和前後端的关系
前端：
前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现。
后端：
后端更多的是与数据库进行交互以处理相应的业务逻辑，需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能（只有一些专业的人员才能大致看到是哪一个语言编写的、用什么方式进行创建的、怎么进行继续改写或优化网站比较好的）。
需要依赖后端方案的RWD通常是网页版、手机版等等分开服务、设计、产出页面；而不需要依赖后端方案的RWD通常是网页版、手机版等等一起服务、设计、产出页面，基于HTML5和CSS3方案可成。

2010年，一名独立的网页设计师，也是开始整个“ 响应式设计”的Ethan Marcotte，他在A List Apart上发表了一篇文章，首次提出了运用三种已有技术（弹性网格布局、弹性图片/媒体、媒体查询）的解决方案。
http://alistapart.com/article/responsive-web-design