响应式网页设计

响应式Web设计含义：

1. 基于HTML5和CSS3的RSD(Responsive Web Design）响应式Web设计
2. 网页内容会随着视口（viewport）及设备（device）的不同而呈现不同的样式（style）
3. 利用弹性网格布局（fluid grid）、弹性图片/媒体（flxible images）、媒体查询（media queries）等技术实现
4. 最初由Ethan Marcotte在2010提出，当时他在网页发布的一篇文章运用了此技术，将叫做响应式web设计。

HTML5：

英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”，主要通过HTML标记对网页中的文本、图片、声音等内容进行描述。（XHTML是更严谨纯净的HTML版本，目的是为了实现HTML向XML的过渡。）

CSS:

CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

font	color	background	float
字体属性	颜色属性	背景属性	浮动属性

JavaScript:

JavaScript是Web页面中的一种脚本语言，通过JavaScript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中，JavaScript用于为页面添加动态效果。

RWD:

是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。

资源工具箱
[资源工具箱](http://gs.statcounter.com//" 查询")

手机电脑平板使用率对比图.png

自2016年来手机的使用率越来越靠近平板电脑，并在2016年11月超过了平板电脑。普遍在电脑上浏览网页的传统已经逐渐消失，可许多网页并未设计响应式网页导致手机观看的网页页面与电脑并无区别，过小的手机屏幕是的信息阅读不全，造成浏览者的需求得不到满足。因此根据目前的现状响应式网络设计极其需要被广泛应用。
芒果tv没有采用响应式Web设计
芒果tv网页
北京大学官网采用了响应式Web设计
北京大学网页

北京大学手机版.png

DevTools：Chrome开发者工具

RWD三个关键组成部分：

1. 媒体查询（CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求）包含媒体类型和零个或多个检测媒体特性的表达式。width、height和color都是可用于媒体查询模块的规范。使用媒体查询，可以不必修改内容本身，而让网页适配不同的设备。From书本p17.
2. 弹性网格布局（采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小）
3. 灵活缩放的图片(图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。)

RWD与前后端关系：前端即用户看到的美观的网络页面，后端即技术人员编写的代码符号。响应式网络设计的后端代码有变化，可依据不同的设备显示出不完全一样网页前端。