什么是“响应式网页设计”
“响应式网页设计”这个名字是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的正常运转需要前端与后端的相互交互来实现。
网友评论