响应式网页设计

1.响应式网页设计：Responsive Web design

百度释义：响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局.

响应式网站设计的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。(具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。)无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备.换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了

微信图片_20180311151207.png

由上图可知，现代人使用的设备多种多样，有计算机，手机，ipad等多端设备。为了更好的·用户体验，也为了更多从业者的方便，使页面能够在这些设备自由切换布局很有必要。

以下是应用了响应式网页设计的例子：清华大学http://www.tsinghua.edu.cn/publish/newthu/index.html

微信图片_20180311185256.png

没有应用响应式网页设计的例子：kfc：https://www.4008823823.com.cn/kfcios/Html/index.html?utm_source=baidu&utm_medium=PCBrandzone&utm_campaign=KFC%E5%AE%85%E6%80%A5%E9%80%81&utm_content=Headline

微信图片_20180311182604.png

2. RWD的组成

1.网格布局支持弹性尺寸（flex-size）:所谓的流体布局，其实就是在你pc端实现的页面基础上，将一些元素的宽高由原来的固定多少像素(px)调整为百分比(%)或字体比例(em)(或布方面的margin、padding、left、top等以px为单位的值)，这也是当前实现响应式布局的两种主要实现方法。

2.弹性图片(Flexible Images):指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情。

3.媒体查询（Media Queries）媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

3.RWD与前后端的关系

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

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

后端:后端开发一般也叫做后台，其负责是网站后台逻辑的设计和实现还有用户及网站的数据的保存和读取。比如一般网站都是有用户注册和登录的，用户的注册的信息通过前端发送给后端，后端将其保存在数据库中，用户登录网站的时候，后端需要通过用户输入的用户名和密码是否与数据库中的一致来判断用户是否有权限登录，这是后台开发中的一个最简单的功能。

4.“响应式web设计”是ethan Marcotte在2010年发明的，当时，他写了一篇文章，综合运用了弹性网格布局，弹性图片/媒体及媒体查询实现了一个解决方案，这就是“响应式web设计”

链接：http://ethanmarcotte.com/