响应式网页设计

---

名词解释

(来源：《响实》及网络）

• 响应式Web设计（Responsive Web Design）: 简称RWD，网页内容会随着访问它的视口及设备（device）的不同而呈现的样式（style）。

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

• 视口（viewport）：浏览器中用于呈现网页的区域叫视口。

• 弹性网格布局（fliud grid） ：主要使用百分比来设置各个部分的宽度 , 用来适应不同的分辨率 。有时候 , 对于网页中的某一部分元素 (比如边界值 , 侧边栏 ), 可以使用固定宽度 , 但大部分元素是使用百分比来控制的 。

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

• 媒体查询（media queries）：媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width、height和color都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适配不同的设备。

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

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

• 集成开发环境(IDE):集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。

• 超文本标记语言(HTML): 超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准,它通过标记符号来标记要显示的网页中的各个部分.

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

• javascript代码：JS即Javascript，Javascript是一种由Netscape的LiveScript发展而来的脚本语言，主要目的是为了解决服务器终端语言。

• W3C：（英文World Wide Web Consortium）万维网联盟。

• link（html标签）： 标签定义文档与外部资源的关系。
  标签最常见的用途是链接样式表。

• META标签：通常所说的META标签，是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

---

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

全球屏幕分辨率统计.png

全球桌面与移动与平板电脑市场份额.png

根据statcounter 查询的“2017.2—2018.2全球屏幕分辨率统计表”显示，全球屏幕分辨率是多种多样的，而响应式网页设计就是网页内容会随着访问它的视口和设备的不同而呈现不同的样式，能自适应不同的分辨率。
根据“全球桌面与移动与平板电脑市场份额表”可以大概知道不同设备的使用人数，由于响应式网页设计的优越性，无论用户使用笔记本还是iPad或手机，页面都可以自动切换适应，这无疑省去了不少功夫。

采用了响应式Web设计例子：克罗地亚中国旅行社

网站链接：http://www.go2croatia.net/

克罗地亚中国旅行社在不同设备的样式.jpg

没有采用了响应式Web设计例子：天猫

网站链接：https://jx.tmall.com/?ali_trackid=2:mm_28465560_38840923_145592982:1520758729_282_388081191

天猫.jpg

对比很明显，采用了响应式网页设计的网站在不同设备的显示更整洁明了，能根据设备的不同自适应屏幕，更改样式，看起来让人感觉更舒服。但由于技术等原因，天猫等大型网站并没有采用响应式网页设计。

---

RWD的三项组成科技

RWD利用弹性网格布局、弹性图片／媒体、媒体查询等技术实现。
（来源：教科书及网络改）

①弹性网格和布局：百分比布局使得网页宽度能够随着查看他们的屏幕窗口大小变化，因而得名弹性布局。使用弹性布局也轻松解决媒体查询无法实现的“设计在媒体查询断点间的平滑过渡”这一问题。但弹性布局虽然可以让设计适应较多场景，也包括某些尺寸的屏幕，有时却也不够用，需要媒体查询配合。

②弹性图片／媒体：“弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。”

③媒体查询：官方给媒体查询下的定义是——“包含媒体类型和零个或多个检测媒体特性的表达式。width、height和color都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适配不同的设备。”媒体查询解决了一些弹性布局无法解决的问题，相当于css中基本的条件逻辑。

RWD和前后端的关系

Web前端和后端之区分，以及面临的挑战——
http://blog.csdn.net/u013485792/article/details/52316512

常见技术安排：在访客至数据库/云端之间
前端、网页伺服器、API伺服器、后端数据库/云端
常见人员安排：在平面设计至计算机科学之间
平面设计师、前端工程师、后端工程师

RWD的前后端大多数情况下是相辅相成的，但有的RWD需要依赖后端，有的则不需要。需要的比如网页版、手机版等等分开服务、设计、产出页面；不需要的通常是网页版、手机版等等一起服务、设计、产出页面。