名词解释
响应式Web设计（RWD）
网页内容会随着访问它的视口及设备的不同而呈现不同的样式。
超文本标记语言（HTML）
HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
层叠样式表（CSS）
是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
视口（viewport）
浏览器中用于呈现网页的区域。
弹性网格布局（fluid grid）
网格布局支持弹性尺寸（flex-size），弹性尺寸使用fr尺寸单位，其来自 "fraction" 或 "fractional unit" 单词的前两个字母，表示整体空间的一部分。
弹性图片（flxible images）
指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。
媒体查询（media queries）
包含媒体类型和零个或多个检测媒体特性的表达式。width，height和color都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适配不同的设备。
为何需要“响应式网页设计”？
响应式Web设计是一种统一的解决方案，可以让Web作品适配手机，平板和电脑桌面。响应式的网站可以适应用户的屏幕大小，为今天和明天的设备都提供最佳用户体验。下面是互联网与新媒体市场调查机构stat counter调查全球屏幕分辨率的数据表格：
全球屏幕分辨率统计表
从表格可以看出，市场上各类电子产品分辨率非常的多，所以为了所有用户都可以得到最佳的上网体验，响应式网页设计的出现很有必要。
下面我将举2个网站的例子，1个网站采用了响应式Web设计，另一个则没有，我们可以进行对比看看有什么不同。
淘宝网
苹果官网
对比2个网站可以看出，采用了响应式Web设计的网站可以根据屏幕分辨率不同而呈现不同的样式，给了用户更好的体验。
RWD和前后端的关系
Web前端就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
Web后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
RWD一词提出人Ethan Marcotte
Ethan Marcotte是一位独立的网页设计师，他非常关心漂亮的设计，优雅的代码以及两者的交集。多年来，他的客户包括纽约杂志，圣丹斯电影节，波士顿环球报和人物杂志。
网友评论