响应式网页设计

名词解释

响应式网页设计

Responsive Web design（RWD）

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

超文本标记语言

HyperText Markup Language（HTML）

• 标准通用标记语言下的一个应用，超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

• 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

层叠样式表

Cascading Style Sheets（CSS）

• 一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

• CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

互联网总称

World Wide Web (Web)

• 全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。

• 是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

域名解析系统

Domain Name System（DNS）

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

• DNS协议运行在UDP协议之上，使用端口号53。在RFC文档中RFC 2181对DNS有规范说明，RFC 2136对DNS的动态更新进行说明，RFC 2308对DNS查询的反向缓存进行说明。

弹性/流性网络布局

Fluid Grid

• 页面布局结构基于表格，以往的网页布局是以像素（px）为单位，来固定网页各元素的尺寸（导致某些网页需要拖拉滚动才能完整浏览）。

• 在响应式网页设计中，则以百分比为单位，可以让网页根据视口大小在任何媒体查询之间灵活伸缩修正样式（也可以说是使用媒体查询来限制元素变动范围）。以此实现固定尺度转换为相对尺度。

视口

Viewport

• 在 Windows的作图函数中，涉及逻辑坐标到设备坐标的转换。这里提到的窗口（window）、视口(viewport)是对应的概念。

• 视口是与设备相关的一个矩形区域，坐标单位是与设备相关的“像素”。窗口的坐标是逻辑坐标，与设备无关。二者就定义了这两个坐标系统的比例关系。程序作图时，使用的坐标总是是窗口坐标。而实际的显示或输出设备却各有自己的坐标。

弹性图片/媒体

Flxible Images

• 不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。

Web前端

• 在Web应用中用户可以看得见的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

Web后端

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

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

StatCounter-resolution-ww-monthly-201702-201802.png

• 随着移动互联网高速发展的，智能手机的普及速度已经快人手一部了，绝大多数城市人已经到了没有手机就没有安全感的地步了。智能手机全民使用也就意味着越来越多的用户会通过移动设备访问互联网。当下用手机浏览新闻、搜索资源、查找销售渠道、网购等等已经成为一种生活方式。

• 但是，现在很多网名都有这样的经历有些网站压根就没有针对移动设备的网站，哪怕是有，大多都存在不足，阅读体验完全跟不上传统的Web版本，而且在不同的移动设备上，浏览体验也是大相径庭，让很多用户大为苦恼。

• 在这种现状下，怎样让网站兼者Web版本和移动版本，并确民良好的用户体验，这得是越来越需要的问题，当然有需求，就有市场响应式网页应运而生。

响应式网页设计例子及优势

• 知乎（www.zhihu.com）
  
  

  知乎1.jpg

知乎2.jpg

• 搜狐（http://www.sohu.com/）
  
  

  搜狐1.jpg

搜狐2.jpg

• 综上可见，响应式网页设计更为便捷。

RWD的三项组成科技

流动网格（Fluid Grids），灵活的图片（Flexible Images）和媒体查询（Media Queries）是对于响应式网页设计的三种技术元素，但它们也是需要不同想法的方式。

• 流式网格：概念要求页面元素使用相对单位如百分比或字体排印学调整大小，而不是绝对的单位如像素或点。

• 灵活的图片：也以相对单位调整大小（最大到 100%），以防止它们显示在包含它们的元素外面。

• 媒体查询：允许网页根据访问站点设备的特点而使用不同 CSS 样式规则，最常用的是浏览器的宽度。

RWD和前后端的关系

与前端的关系

• 前端指网站的前台部分包括网站的表现层和结构层，即用户可以接触到的部分。包括Web页面的结构、外观视觉表现以及层面的交互实现。

• 其一般分为前端设计和开发，即视觉设计和网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

与后端的关系

对应jsp、javaBean 、dao层、action层和service层的业务逻辑代码。与数据库进行交互以处理相应的业务逻辑。如何实现功能、数据的存取、平台的稳定性与性能等是其工作的重点及方向。

RWD一词提出人Marcotte

“响应式web设计”这个名字是Ethan Marcotte在2010年发明的。（http://alistapart.com/article/responsive-web-design）