名词解释

响应式网页设计（RWD）

响应式网站设计（Responsive Web design）是一种网络页面设计布局，其主要是作用是集中创建页面的图片排版大小，智能地根据用户行为以及使用的设备环境进行相对应的布局。它是由Ethan Marcotte在2010年是发明的，他当时用了弹性网格布局、弹性图片/媒体、媒体查询，来实现了一个解决方案。

为什么需要响应式网页设计

随着移动互联网的到来，网民对网站提出了更高的要求，网站不仅需要满足电脑端客户的浏览需要，还需要考虑到网民通过移动手机、平板电脑来访问网站。网站就需要适应对平台的用户访问，所以需要的不是一个普通网站，需要一个响应式的网站。

QQ浏览器截屏未命名.png

这是过去一年手机、平板、台式机的使用情况，手机遥遥领先，而平板也有少量用户，所以，为了满足各种不同用户的需求，我们需要响应式网站。

网站例子

使用响应式的网站

哔哩哔哩弹幕网

微信图片_20180311115113.jpg

1111fgg.png

没有使用响应式的网站

中山大学南方学院教务管理系统

假的.png

RWD的三项组成科技

弹性网格布局

就是打开网站时，你可以缩放浏览器窗口，文本便会根据屏幕缩放自动重排。

弹性图片/媒体

运用创建CSS文件的方法，使用代码让图片会缩放占满最大的可用空间。

媒体查询

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

RWD与前端的关系

前端：通常是指网站的前台部分。前端开发中最基本也是最必须的三个技能是HTML、CSS、JavaScript

·HTML是超文本标记语言 (Hyper Text Markup Language)，是构建网页的基本元素

·级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。

·JavaScript要目的是为了解决服务器端语言，为网页提供了数据验证的基本功能。

响应式网页设计