名词解释

响应式Web设计

网页内容会随着访问它的视口及设备的不同而呈现不同的样式

CSS预处理器（Sass、 LESS、 Stylus、 PostCSS）

可以帮我们组织代码、变量、颜色操作和数学运算的工具

视口（viewport）

浏览器中用于呈现网页的区域

max-width规则

保证所有图片最大显示为其自身的100%

为何需要响应式网页设计

几年前，我们看到的网站还都是固定宽度的，目标是让所有用户都拥有相同的体验。这种固定宽度（通常为960像素左右）对笔记本电脑来说也不算宽，拥有更大显示器的用户则会在两侧看到很大的白边。响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。
由于目前移动设备的大量使用，以及PC显示器的尺寸逐渐出现较大差别，传统的web页面已经不能满足多种设备的浏览效果。2016年10月，移动设备占全球市场份额已超越pc显示器。

StatCounter-comparison-ww-monthly-201601-201612.png

• 采用响应式web设计的网站
  https://www.bilibili.com/
• 没有采用响应式web设计的网站
  http://www.xhsysu.edu.cn/

RWD的三项组成科技

弹性网格布局

用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为Flex 布局。

弹性图片/媒体

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

媒体查询

CSS媒体查询允许我们基于浏览网站的设备的特性来应用不同的样式申明，最常用的特性是视口宽度。实际操作为：对设备提出询问，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

RWD前后端的关系

• 前端：对应我们写的html 、javascript 等网页语言作用在前端网页。
• 后端：对应jsp、javaBean 、dao层、action层和service层的业务逻辑代码。（包括数据库）