响应式网页设计

名词解释

响应式Web设计（Responsive Web design）：

响应式网页设计（RWD）是一种网页设计方法,使网页内容包括图片排版大小等，随着用户使用时不同的设备、视口而改变相应的布局样式。

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

RWD的三项组成科技

• 弹性布局（Fluid Grids）

弹性布局即为百分比布局使得网页宽度能够随着查看它们的屏幕窗口大小变化。也是将固定像素大小转换为弹性比例大小。在Ethan Marcotte的文章Fluid Grids中有相关介绍及转换公式。

• 响应式图片(Flexible Images)

指的是不给图片设置固定尺寸，而是根据流体网络进行缩放，用于各种设备的尺寸。根据显示器大小切换图片分辨率。

• 媒体查询（Media Queries）

由媒体类型和零个或多个检测媒体特性的表达式组成，例如宽度、高度和颜色。可针对不同的媒体类型（屏幕宽度、方向等）呈现不同的样式，为持有不同类型设备的用户提供了最佳的体验。

RWD和前后端的关系

前端（Frontend）

• 定义：通常是指，网站的前台部分，包括网站的表现层和结构层。前端技术一般分为前端设计和前端开发前端设计，可以理解为网站的视觉设计，前端开发是网站的前台代码实现。
• 用于前端开发的工具：超文本标记语言（HTML）、级联样式表（CSS）、JavaScript、WebAssembly

后端（Backend）

• 定义：后台程序设计，有关数据库、代码等。包括精通jsp，servlet，java bean，JMS，EJB，Jdbc，Flex开发及相关框架。

参考文章 什么是前端、什么是后端

关系

前端包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
后端主要是实现与数据库进行交互，作为处理相应的业务逻辑。更需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

为何需要响应式网页设计

以下通过列举statcounter中的例子来说明

2016年全球桌面与移动与平板电脑市场份额

最近12个月全球桌面与移动与平板电脑市场份额

通过以上两张图表，其中的数据可以看出移动设备已逐渐超过桌面占据主要市场。多种不同设备其不同的分辨率使得响应式网页设计的出现，因每种都占有一定市场份额，响应式设计为不同用户的设备提供了支持，更好地保障了人们的需求，达到在不同设备上都具有最佳效果。

设计例子

响应式网站

• 知乎
  

  知乎 Galaxy5s界面

知乎 iPhone5界面

非响应式网站

• 果壳网
  

  果壳网
  
  相比之下，同样类型的网站，知乎的响应式设计为用户提供了更多的方便，能够适应多型浏览器，特别是移动端的用户需求。既是对用户的便捷，也为其自身开拓了更大的市场范围。

部分内容整合自网络