响应式网页设计

一、名词解释

名词引用自教科书——《响应式Web设计——HTML5和CSS3实战(第二版)》

响应式Web设计（Responsive Web Design）
响应式网站设计是一种基于HTML5和CSS3的网络页面设计布局，随着视口(viewport)及设备(device)的不同呈现不同的样式(style)。其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局,也就是使用弹性网格布局(fluid grid)丶弹性图片／媒体(flexible images)丶媒体查询(media queries)等技术实现让一个网站同时适配多种设备和多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。

视口(viewport)
浏览器中用于呈现网页的区域，视口通常并不等于屏幕大小，特别是可以
缩放浏览器窗口的情况下。

弹性网格布局(fluid grid)
网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。弹性尺寸使用fr尺寸单位，其来自 "fraction" 或 "fractional unit" 单词的前两个字母，表示整体空间的一部分。

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

媒体查询(media queries)
是界面为了适应不同屏幕大小而存在的。使用CSS3的媒体查询根据屏幕宽度来调整布局，可以让我们在某些条件下（如宽度和高度为多少的情况下）为网页应用样式。

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

前端（front-end）
前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

后端（back-end）
后端更多的是与数据库进行交互以处理相应的业务逻辑，需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能

HTML
超文本标记语言，标准通用标记语言下的一个应用，就是指页面内可以包含图片甚至音乐等非文字元素。超文本标记语言的结构包括头部分（Head）、和主体部分（Body），其中头部提供关于网页的信息，主体部分提供网页的具体内容。

CSS
层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

HTML5
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML的第五次重大修改）

CSS3
CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。

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

Chrome 开发者工具
这是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代丶调试和分析

断点
就是某个宽度临界点，跨过这个点布局就会发生显著变化

最小宽度媒体查询
只在视口符合最小定义宽度条件时才会应用到网页，实际的最小宽度可以使用不同的长度单位指定，比如百分比、em、rem和px，例如：
@media screen and (min-width: 50em) {
/ 样式 /
}
@media指令告诉浏览器这里是一个媒体查询，screen告诉浏览器这里的规则只适用于屏幕类型，而and (min-width:50em)的意思是其中的规则只适用于视口宽度在50em以上的情况。

文本编辑器
文本编辑器是用作编写普通文字的应用软件，常用来编写程序的源代码

URL
统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

DNS
域名系统，万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过域名，最终得到该域名对应的IP地址的过程叫做域名解析（或主机名解析）

HTTP
超文本传输协议是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。

Web标准
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

RWD满足以下需求
1.面对不断扩展的浏览器和设备应对方案
2.可以让一个网站同时适配多种设备和多个屏幕
3.可以让网站的布局和功能随用户的使用环境（屏幕大小丶输入方式丶设备/浏览器能力）而变化。
4.基于HTML5和CSS3的RWD不需要依赖后端方案。

标签
按照设备的宽度（device-width）来渲染网页内容

标签
就是要保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大）

二、为何需要"响应式网页设计"**

图片来自(互联网与新媒体)市场调查机构 statcounter 的数据所制的图和表

1.中国的智能手机用户的数量在2016年已经超过PC端的用户数量,而世界的智能手机用户的数量也是在2016年已经超过PC端的用户数量，这表明更多的流量会从移动端流向网页，大大加大了人们在外出行使用网络的频率，并且手机端浏览网页更加方便，这就要为用户设置能够在移动端浏览的响应式页面

1.png

2.png

2.增强用户体验,实现页面的可扩展性，响应式页面提供了将来可以支持任何新屏幕或设备的最佳机会。中国和世界的屏幕分辨率越来越多样化，而不只是单一的以苹果公司为主导的屏幕分辨率，这就要求在设计网页时要充分考虑页面的断点与衔接，使页面能够适应不同手机分辨率的大小和横竖屏

3.png

4.png

因为随着智能移动设备不断地加入到互联网中来，使得互联网上的访问设备和屏幕的分辨率是爆炸性的增长。

所以为了给移动端提供更好的体验，必须在网站设计中使用响应式网站设计，并且整合从PC端到手机的各种屏幕尺寸和分辨率，用技术来使网页适应不同分辨率的屏幕。

三、区别是否使用响应式Web设计的网站

例子网站的可点连结（必要）及图表（可选）

1.已使用响应式Web设计——华为手机官网、Vivo手机官网

微信图片_20180311155806.png

微信图片_20180311160032.png

2.未使用响应式Web设计——一站到底官方网站、最强大脑官网

微信图片_20180311155158.png

微信图片_20180311155406.png

四、RWD(响应式网页设计)的三项组成科技

伊桑·马科特（Ethan Marcotte）在2010年首先提出了响应式网页设计（RWD,Responsive Web Design）这个术语。在他的一篇文章《[Responsive Web Design · An A List Apart Article》 中他将已有的三种发开技巧（弹性图片，弹性网格布局，媒体与媒体查询） 进行了整合，命名为响应式网页设计。
作者：Jony

流动网格(弹性网格布局)
设计不会对浏览器窗口的宽度做出任何假设，并且可以很好地适应具有纵向和横向模式的设备。

灵活图像(弹性图片)
不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率

媒体查询(媒体与媒体查询)
是界面为了适应不同屏幕大小而存在的。使用CSS3的媒体查询根据屏幕宽度来调整布局，可以让我们在某些条件下（如宽度和高度为多少的情况下）为网页应用样式

五、RWD和前後端的关系

前端对于网站来说，通常是指网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

微信图片_20180311164432.png

timg (1).jpg

timg.jpg

后端更多的是与数据库进行交互以处理相应的业务逻辑，需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能

微信图片_20180311164445.png

u=1294177219,3961223716&fm=27&gp=0.jpg

u=3582960560,1019263646&fm=27&gp=0.jpg

RWD与前后端有多种形式：
有需要依赖后端方案的RWD——网页版、手机版、等等分开服务、设计、产出页面
有不需要依赖后端方案的RWD——网页版、手机版、等等一起服务、设计、产出页面
还有基于HTML5和CSS3就可以制作不需要后端方案的RWD

一个成型的网站是需要前端和后端的不断交互调整和检查来维护的，前端和后端必须互相搭配和互补，不能够是只有前端或者只有后端，假使只是运行其一，是没有办法搭建网站的。而且响应式网页设计的引进，大大提高了网页在移动端的可视性和拓展性，使在互联网上的访问设备和屏幕分辨率得到很好的改善

六、摘抄伊桑·马科特的一段话作为结语

前进的道路
流动网格，灵活图像和媒体查询是响应式网页设计的三大技术要素，但它也需要不同的思考方式。我们可以使用媒体查询逐步改进我们在不同查看环境下的工作，而不是将我们的内容隔离到不同的设备特定体验中。这并不是说没有针对具体设备的单独网站的商业案例; 例如，如果您的移动网站的用户目标范围比其桌面设备的范围更有限，那么为不同的内容提供服务可能是最好的方法。
但是那种设计思维并不需要成为我们的默认设计。现在比以往任何时候，我们都在设计意在通过不同体验梯度来观看的作品。响应式网页设计为我们提供了一条前进的道路，最终让我们能够“为潮起潮落而设计”。