响应式Web设计

响应式网络设计

响应式网络设计（Responsive Web Design）是一种能够让一个网站同时适配多种设备和多个屏幕可以让网站的布局和功能随着用户使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化
RWD完成需要五个方面

1.灵活的基础
2.成为响应
3.满足媒体查询
4.适应，回应和克服

响应式网络设计（RWD）关键词

HTML（超文本标记语言）
超文本标记语言，标准通用标记语言
超文本就是指页面内可以包含图片、，甚至音乐、链接、程序等非文字元素。

层叠样式表（CSS）
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

JavaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。

SVG （可缩放矢量图形）
可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

响应式Web设计（RWD）
是一种统一的解决方案，可以让Web作品适配手机、平板和桌面电脑。响应式的网站可以适应用户的屏幕大小，为今天和明天的设备都提供最佳的用户体

StatCounter-comparison-ww-monthly-201401-201412.png

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

StatCounter-comparison-ww-monthly-201702-201802.png

年份	平板	移动	桌面
2014	6.5%	31.82%	61.68%
2016	4.9%	50.31%	44.79%
2018	4.07%	51095%	43.98%

由此可看出随着年份的增长平板与桌面的市场份额的占比逐步减少，而移动端份额超过桌面端，移动端的品牌繁多，各类品牌的屏幕大小分辨率大小各不相同，这时就需要响应式Web设计来适应移动端的屏幕分辨率。

响应式Web设计（RWD）的三项组成科技

1.弹性图片/媒体（flxible images）
弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。

2.弹性网络布局（fluid grid）
百分比布局使得网页宽度能够随着查看它们的屏幕窗口大小变化，能够实现设计在媒体查询断点间的平滑过渡

3.媒体查询（media queries）
可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

响应式Web设计（RWD）和前后端的关系

前端

前端指的是界面，图形美化ps、界面设计、html、css、javascript等网页上能够直接看到的东西，是用户可以直接看到感受到的东西。

后端主要数据交互，业务逻辑、数据库、安全性、框架……大多是数据逻辑的处理。
前端是RWD的皮囊，RWD也需要前端来展示网页的作用以及对用户使用网页进行引导。

后端

后端主要数据交互、数据库、框架大多是数据逻辑的处理。
后端是RWD的肉体器官，是支撑起整个网页的重要根基，RWD需要其进行对网页上数据的服务从而反馈到前端让用户看见。

响应式网络设计应用实例

使用了响应式网络设计的网站：Sparkbox

02037d567387610000011a1767a3b4.jpg

未使用响应式网络设计的网站：淘宝

QQ截图20180313011603.png

补充：RWD提出人Marcotte网页连结