响应式网页设计

响应式网页设计(RWD)：

一种新的网站设计模式，用此构建的网站能自动适应不同的访问设备(桌面电脑、平板电脑 智能手机)，方便用户阅读和导航浏览，从而提供更好的用户体验。

超文本标记语言（HTML）：

就是指页面内可以包含图片、链接，甚至音乐等非文字元素。
超文本标记语言的结构包括“头”部分（Head）、和“主体”部分（Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

视口(viewport)：即

浏览器显示页面内容的屏幕区域。

媒体查询（media query) ; 流式/弹性网络布局（fluid grid）;前端（frontend）; 后端（backend）会在以下文章随文章内容分别做详细解释

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

在2016年以前，手机与电脑在市场份额上，电脑原是高于手机的，但随着科技的进步，信号的覆盖种种原因，手机越来越受欢迎。
单就国内来看，在2016年3月份间手机在市场份额上超越电脑，由此可见在众多电子设备中人们越来越倾向于选择手机。

我国数据.png

而从全球上来看，手机在市场份额上也在2016年10月至11月间开始超越电脑。

全球数据.png

无法随着屏幕分辨率改变网页的大小的网站，不仅给用户的浏览带来及其不便的体验，也会使网站 在各种同类型网站的层出不穷（又或者有使用起来更方便的网站）的现实情况下失去竞争力。
响应式网页设计能使网站在各种移动端设备上都能布局合理
因此，响应式网页设计是十分必要的。

举两个响应式网页设计与非响应式网页设计的直观例子：
响应式网页设计：https://www.microsoft.com/zh-cn/

无标题1.png

无标题.png

非响应式网页设计：http://youku.com/

优酷2.png

前者图片排版会随着设备的大小有选择地显示是一张还是多张。而后者却无，且文字大小也无改变，使使用者看起来十分费力。

响应式网站设计有三个关键组成部分：

1.媒体查询（media query）
2.流动/弹性网络布局（fluid grid)
3.弹性图片/媒体

媒体查询（media query）
“media”是用来指定特定的媒体类型，媒体查询能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。
Media Queries有其自己的使用规则。

流式/弹性网络布局（fluid grid）
网站的布局必须对显示该网站的设备的尺寸作出反应并适应该尺寸。流体网格布局为创建与显示网站的设备相符的不同布局提供了一种可视化的方式。
（例如：使用流体网络布局为桌面计算机、平板电脑或手机其中每种设备指定布局。通过哪种设备使用网站，将使用相应的布局显示网站）

弹性图片/媒体
弹性图片/媒体指的是不给它们设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。

Ethan Marcotte 在2010年发明了“响应式Web设计”这个名字，他的“响应式Web设计”就是通过这以上三个关键组成部分实现的。有兴趣可以浏览他这篇描述自己想法的文章。http://alistapart.com/article/responsive-web-design

RWD（响应式网站设计）和前后端的关系

前端（frontend）:

对于网站来说，前端通常是指，网站的前台部分包括网站的表现层和结构层。
一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现。

HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。

后端（backend）:
大多数后端系统需要连接到存储应用程序数据的数据库。
因此后端是网站信息管理，更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

后端开发人员需要更多地了解PHP Web框架，Ruby on Rails，ASP.NET MVC或任何正用于构建应用程序的服务器端Web开发框架。