响应式网页设计

• 响应式网页设计，亦称“响应式Web设计”，其简称为RWD。所谓的响应式Web设计，是指“网页内容会随着访问它的视口及设备的不同而呈现不同的样式。”意思是说，同一个网页，你在手机上看到的和在电脑上看到的模样将会不一样——但是其内容和网页本身并没有任何改变。

• HTML，超文本标记语言，即含有非文字元素的语言。比如图片，视频，音乐等。

• CSS，全称Cascading Style Sheets，“是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。”

随着互联网的日夜发展，人们逐渐在不同的设备中浏览网页。下面我将用在statcounter上的数据来作为解释为何要运用响应式网页设计的例子。

例子1.jpg

• 如图所示，Mobile和Desktop都是2016年1月到2017年12月的两个重要的平台。如果网页设计者只顾及一部分用户，那另一部分用户在查看网页的时候，就会因为设备等外界问题没法享受网页里面的内容——或者说，因为网页的格式没法看得很舒服，会因为屏幕大小之类的问题和图片做斗争。

• 在如今这个时代，很多网页都有响应式网页设计。比如说中山大学传播与设计学院就有运用响应式网页设计。但同时，一些网页因为发开了APP，希望引流，所以官网上面并没有使用响应式网页设计。比如LOFTER。

最早提出“响应式Web设计”这个名字的人是Ethan Marcotte，他运用了三种已有技术实现了一个解决方案，即响应式Web设计。这三个已有技术分别是弹性网格布局，弹性图片/媒体，媒体查询。

• 弹性网格布局：弹性地把平面划分成多个表格，根据需要适应于各种平台。

• 弹性图片/媒体：“弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。”同理，弹性媒体也是不给媒体一个固定的模式，而是根据其内容进行协调。

• 媒体查询：“由可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。”

Web的前后端的关系。

• Web的前端是用户看到的最终网页状态，而后端则是程序员等网页设计者负责的工作。

• 网页设计的大量工作由后端人员负责，然而当代码程序编辑结束之后，前端工作人员要根据用户的反馈再度设计网页，然后重复之前的工作。这个工作要不断重复，就算网页已经没有任何问题，也要时不时根据用户需求重新编辑。