响应式网页设计
名词解释
- 响应式Web设计
伊桑·马科特（Ethan Marcotte）在2010年首先提出了响应式网页设计（RWD,Responsive Web Design）这个术语。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他将已有的三种发开技巧（弹性图片，弹性网格布局，媒体与媒体查询） 进行了整合，命名为响应式网页设计。
那什么才是真正的响应式设计？马科特说，真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。马科特在文章中举了一个大侦探福尔摩斯的例子A Flexible Grid，它可以自动识别并相应的调整页面布局。
可能你会更加接收来自网友JJ Ying的解释:
很久很久很久以前，每个人都只有一件衣服（ Website ），不管你有钱没钱大家每天都只穿这一件。后来有人发明了舞会（移动互联网），大家都争先恐后地想要参加，于是一个做「开发」的裁缝忽悠人们说进舞会最好订做一件专门的礼服（ Mobile Site ），大家想想也对，上班和出去哈皮都穿同一件衣服多无聊啊，舞会就要有舞会的样子。于是乎只要有点闲钱的人都做了礼服，他和原来那件叫做 Website 的衣服是完全不一样的，面子不一样，里子也不一样。后来舞会的种类越来越多了，很多人被迫做了好多好多件礼服，于是又有一个叫做「前端」的裁缝站出来说你们每年要新做那么多衣服，多费钱啊，而且一出门钥匙啊皮夹子啊名片都要在不同衣服里换来换去多麻烦。你看，我们新发明了一个手艺叫做「Responsive Design」，只要把你原来那件衣服稍微那么一改，以后去哪个舞会都可以只穿这一件衣服，衣服的里子永远都差不多，但面子可以按照要求自适应不同的舞会。于是所有人都开始换上这种响应式的衣服了。。。
RWD的三项组成科技
采用 CSS 的 media query 技术
流体布局（ fluid grids ）
自适应的图片/视频等资源素材
（为小、中、大屏幕做一些优化，目的是让任何尺寸的屏幕空间都能得到充分利用）
采用 CSS 的 media query 技术
CSS2允许用户对特定media类型制定样式。
例如： 针对screen（屏幕）用 @media screen{ ... }里设定的样式。 针对打印样式用 @media print{ ... } 里的样式。
流体布局（ fluid grids ）
创建多个流体式布局，分别对应一个屏幕分辨率范围
自适应的图片/视频等资源素材
基于显示分辨率而自适应改变的图片/视频
例子
来自 statcounter
图中可以看出
- 2016年3月中旬，一直占比较高的桌面端被移动端反超。
- 可以看出全球范围中，移动端的使用已经大大超过桌面端。
- 因此我们需要更多的普及响应式的网页设计。
为什么需要响应式网页设计
1、随着移动端的不断普及甚至超过桌面端的使用，响应式的网页设计可以有效的自适应各个机型的分辨率
2、市场的自我更新迫使着各个行业领域去迎合
RWD和前后端的关系
前端开发和后台开发是有区别的，工作的内容和负责的东西是完全的不同的，以下以网站的开发为例。
1、前端开发
前端开发现在一般指的就是web前端开发工程师其负责是网站前端页面也就是网页的页面开发，简单的说网站前端负责是东西是网站用户可见的东西，如网页上的特效、网页的布局、图片、视频等内容。网站前端工程师的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页，并和后端开发工程师配合做网页的数据显示和交互。
2、后端开发
后端开发一般也叫做后台，其负责是网站后台逻辑的设计和实现还有用户及网站的数据的保存和读取。比如一般网站都是有用户注册和登录的，用户的注册的信息通过前端发送给后端，后端将其保存在数据库中，用户登录网站的时候，后端需要通过用户输入的用户名和密码是否与数据库中的一致来判断用户是否有权限登录，这是后台开发中的一个最简单的功能。</pre>
