名词解释
响应式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是一位独立的网页设计师,他非常关心漂亮的设计,优雅的代码以及两者的交集。多年来,他的客户包括纽约杂志,圣丹斯电影节,波士顿环球报和人物杂志。