响应式网页设计

名词解释

1、响应式web设计：响应式web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小，输入方式，设备/浏览器能力）而变化。基于HTML5和CSS3的的响应式web设计，并不需要依赖服务端或后端方案。
2、RWD：响应式网站设计(简称RWD)是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。
3、HTML5：万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。
4、CSS3：CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
5、CSS3媒体查询：可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。
6、JavaScript：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能
（注，以上条目解释摘自百度百科和书本《响应式web设计》）
7、流式网格：概念要求页面元素使用相对单位如百分比或字体排印学调整大小，而不是绝对的单位如像素或点；
灵活的图片：也以相对单位调整大小（最大到 100%），以防止它们显示在包含它们的元素外面；
媒体查询：允许网页根据访问站点设备的特点而使用不同 CSS 样式规则，最常用的是浏览器的宽度。
——内容摘自网站segmentfault中用户“Bizhong”发表的《浅析RWD》一文

为何需要响应式web设计

根据市场调查机构 statcounter 的数据显示，在2016年至今，在2016年的十月份时候，世界上使用手机屏幕浏览的人数超过了使用电脑桌面浏览的人。
“现今，无论是移动设备、平板电脑、PC，屏幕大小各不相同，若是针对每个屏幕大小单独设计一个解决方案，则会大幅增加网站建设的复杂程度和运营成本。响应式网页设计的概念就是可以让网页根据用户的使用环境进行自动调整，有效的改善用户体验。”——引用网站segmentfault中用户“Bizhong”发表的《浅析RWD》一文

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

这说明了世界上许多人改变了他们的浏览环境，从电脑到手机，也增加了人们对响应式web设计的需求。
而且响应式Web让Web作品适配手机、平板和桌面电脑，适应用户的屏幕大小，为今天和明天的设备都提供最佳用户体验。

有无使用响应式web设计的例子

网站bilibili没有使用响应式web设计https://www.bilibili.com/index.html

bilibili网页电脑端截图.jpg

bilibili网页手机端截图.jpg

网站意派Coolsite360 使用了响应式web设计http://www.coolsite360.com

意派网页电脑端截图.jpg

意派网页手机端截图.png

RWD的三项关键

响应式网站设计有三个关键组成部分：1. media query; 2. 流动网格；3. 灵活缩放的图片。
基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小。最后，图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。——内容摘自百度百科

RWD和前后端的关系

需要依赖后端方案的RWD：
网页版、手机版、等等分开服务、设计、产出页面

不需要依赖后端方案的RWD：
网页版、手机版、等等一起服务、设计、产出页面

基于HTML5和CSS3就可以制作不需要后端方案的RWD
——内容摘自课件

什么是响应式web设计

“响应式web设计”这个名字是Ethan Marcotte在2010年发明的。当时他在A List Apart上写了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），这篇文章综合运用了三种已有技术（弹性网络布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫“响应式web设计”。——摘抄自《响应式web设计基础》

“响应式网页设计（Responsive Web Design，通常缩写为 RWD），又称为自适应网页设计、回应式网页设计。是一种现代网页设计方法，该设计基于 CSS3 的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局，同时减少缩放、平移和滚动。”——内容摘自网站segmentfault中用户“Bizhong”发表的《浅析RWD》一文