响应式Web设计

响应式Web设计(简称RWD)是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。简单的说，所谓的响应式Web设计（RWD），就是网页内容会随着访问它的视口（viewport）及设备（device）的不同而呈现不同的样式，从而使用户获得更好的体验。

各大专业名词解释

• 响应式Web设计

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

• HTML

超文本标记语言(英文名：HyperText Markup Language，简称为HTML)，是一种为“网页创建和其它可在网页浏览器中看到的信息”设计的置标语言。HTML5是指万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。

• CSS

CSS（层叠样式表）是一种用来表现HTML或XML等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展。

• JaveScript

Javascript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。虽与Java有很多相似性，但这两门编程语言从设计之初就有很大的不同。

RWD的三种技术

• 弹性网格布局（fluid grid）

弹性布局是2009年w3c提出的一种可以简洁、快速弹性布局的属性，主要思想是给予容器控制内部元素高度和宽度的能力，旨在为网页提供最大的灵活性。

• 弹性图片（flxible images）

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

• 媒体查询（media queries）

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示。

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

下图是美国一家名为statcounter的网站提供的关于全球设备分辨率使用率的数据比较，很显然，设备的分辨率多种多样，且短时间内不会被某种分辨率所取代。

image.png

在进行网页开发时，工作人员需要针对不同分辨率的设备设计网页，而响应式网页设计可以自动适当显示于各种不同装置，包含桌机、手机、平板等，根据不一样的屏幕大小设计友善的阅读介面，使网站可以被各种族群阅读。当然，在进行网站维修时，也不像以往一般需要多次同步资料，大大的减少了工作人员的工作量。

RWD和前后端的关系

• 前端
  通常说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西，包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

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

简单点来说，前端就是对网页进行设计，后端就是对网页进行开发。在各大公司中，一般要求从事前端的人员熟悉HTML、CSS和JavaScript，而后端人员则要求对Web开发的模式有较深的理解。

使用了响应式网页设计的例子

这是使用了响应式Web设计的网站：https://www.aboutnic.com/caseDetail.asp?id=4&pid=629&attrid=

image.png image.png

这是没有使用响应式Web设计的网站：https://www.bilibili.com/