响应式网页设计

什么是“响应式网页设计”

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

名词解释

中文	英文	术语解释
响应式网页设计	Responsive Web design（RWD）	网页内容会随着访问它的视口及设备的不同而呈现不同的样式
超文本标记语言	HyperText Markup Language（HTML）	是一种详细规定了浏览器和万维网服务器之间互相通信的规则
层叠样式表	Cascading Style Sheets（CSS）	是一种用来表现HTML的一个应用或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
互联网总称	World Wide Web (Web)	是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统
域名解析系统	Domain Name System（DNS）	是因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。
弹性/流性网络布局	fluid grid	页面布局结构基于表格，以往的网页布局是以像素（px）为单位，来固定网页各元素的尺寸（导致某些网页需要拖拉滚动才能完整浏览）。在响应式网页设计中，则以百分比为单位，可以让网页根据视口大小在任何媒体查询之间灵活伸缩修正样式（也可以说是使用媒体查询来限制元素变动范围）。以此实现固定尺度转换为相对尺度。
视口	viewport	视口和设备的屏幕尺寸不是同一个概念。视口是指浏览器窗口内的内容区域，不包含工具栏，标签栏等，也就是网页实际显示的区域。
弹性图片/媒体	flxible images	指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。
媒体查询	media queries	媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
Web前端		在Web应用中用户可以看得见的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
Web 后端		后端是与数据库进行交互以及处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

为何需要“响应式网页设计”？

屏幕分辨率统计全世界.png

现如今，电子产品层出不穷，据上图，市场上各类屏幕分辨率都有用户使用。所以为了不同的用户都可以更好的使用，响应式网页设计很有必要出现以及发展。

桌面和移动和平板电脑的中国市场份额.png

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

根据市场调查机构stat counter网站，以中国与全球的桌面、移动和平板电脑市场份额为例
如上图所示，不论是中国还是全球，移动手机的使用都大于桌面。响应式网络设计的出现可以给用户更好的体验。

为了让读者更好地了解响应式与非响应式网页地区别，我将会以图片地形式来表示。

1、非响应式网页（以凤凰网为例)

如图，在电脑上地显示是如此，在iPhone6plus上地显示也依旧如此。对于用户地使用不是很方便。

非响应式1.png

非响应式.png

2、响应式网页（以乐视电视官网为例）

如下图，是否相比与非响应式网页更为方便呢?

响应式网站.png

响应式.png

UC截图20180310161201.png

响应式网页设计的关键技术

一切弹性化：

我们通过响应式的设计和开发思路让页面更加"弹性"了。图片的尺寸可以被自动调整，页面液态图片技术布局再不会被破坏。虽然永远没有最完美的解决方案，但它给了我们更多选择。无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。

通过液态网格和液态图片技术，并且在正确的地方使用了正确的HTML标记。

响应式图片：

响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。

媒介查询：

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

响应式网页设计与前后端的关系

web前端即在Web应用中用户可以看得见的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。而后端是与数据库进行交互以及处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。因此，web的正常运转需要前端与后端的相互交互来实现。