响应式网页设计

“响应式Web设计”这个名字是Ethan Marcotte在2010年发明的。当时，他在A List Apart上写了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），这篇文章综合运用了三种已有技术（弹性网格布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫“响应式Web设计”。

响应式Web设计（Responsive Web design 简称RWD）:网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

视口（viewport）:浏览器中用于呈现网页的区域。

断点：某个宽度临界点，跨过这个点布局就会发生显著变

statcounter 的数据

根据数据线索显示，手机的使用在2017年3月到2018年2月的一直高于平板和台式。随着使用手机的用户越来越多，对响应式网页的需求也就越来越大。面对不断扩展的浏览器和设备，响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。

---

网易使用响应式web设计http://www.163.com/

网易网页截图

airbnb未使用响应式web设计https://zh.airbnb.com/

airbnb网页截图

RWD的三项组成科技

弹性网格布局（fluid grid）:网页布局是弹性的,就是把原有的样子打开（还不包含媒体查询），缩放浏览器窗口，就会看见文本会根据屏幕缩放自动重排。

弹性图片/媒体（flexible images）：给图片指定固定宽度，让图片能在不同大小的屏幕中自动缩放，但所以图片最大显示为其自身的100%，

媒体查询（media queries）：根据屏幕宽度来调整布局，可使在某些条件下（如宽度和高度为多少的情况下）为网页应用样式。在这个媒体查询中设置的CSS规则，只在视口符合最小定义宽度条件时才会应用到网页。

前后端的关系

前端（front end）：对于网站来说，通常是指网站的前台部分，用户看到的浏览器。网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等

后端：后端就是网站的逻辑部分，主要涉及数据库，动态语言如PHP、ASP、JSP等后台一般指的是管理员操作模块，包括对网站内容的更新、注册会员管理等等，是网站的一个子模块。后端更多的是与数据库进行交互以处理相应的业务逻辑。