响应式网页设计

什么是响应式web设计

1.基于HTML5和CSS3的RWD（Resposive Web Design）响应式web设计
2.随着视口（viewport）及设备(device)的不同呈现不同的样式(style)
3.利用弹性网络布局（fluid grid）、弹性图片/媒体（flexible images）、媒体查询（media queries）等技术实现

RWD是什么

1.面对不断扩展的浏览器和设备应对方案
2. 可以让一个网站同时适配多种设备和多个屏幕
3.可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化
4.基于HTML5和CSS3的RWD不需要以来后端方案
5.由Ethan Marcotte于2010年发布的一篇文章中提出的新词汇

为什么需要响应式web设计

由于上网设备屏幕之间出现了前所未有的差距，因此为了满足多方需求产生了响应式web设计

2018-03-10.png

由此可见，对于浏览器的使用不仅仅是在电脑上，为了能够满足需求，响应式waeb设计是必需的

例子

使用了响应式网页设计的网址：
非凡品味
没有使用响应式网页设计的网址：
淘宝

RWD的组成科技

1. media query：

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.

2. 流动网格:

各个区块的位置都是浮动的，不是固定不变的。

3. 灵活缩放的图片:

除了布局和文本，RWD 还实现图片的自动缩放。

RWD与前后端的关系

• 前端
  方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。
• 后端
  构建可自动适应不同的访问设备的网站