响应式网页设计(Responsive web design,通常缩写为RWD),或称自适应网页设计、回应式网页设计、对应式网页设计。

扩展阅读:“响应式网页设计与手机版网站区别分析”

是一种网页设计的技术做法,该设计可使网站在不同的浏览设备(从桌面电脑显示器到行动电话或其他行动产品浏览设备)上浏览时对应不同解析度皆有适合的呈现,减少使用者进行缩放、平移和卷动等操作行为。

对于网站设计师和前端工程师来说,有别于过去需要针对各种浏览设备进行不同的设计,使用此种设计方式将更易于维护网页。

此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。

RWD响应式网页,如同水一样,遇到怎样的容器(屏幕)就变成怎样的形状,如下图

什么是响应式网页设计?

采用RWD设计的网站使用CSS3 Media queries,即一种对@media规则的扩充功能,以及串流的基于比例的网格和自适应大小的图像以适应不同大小的浏览设备:

串流网格概念要求页面元素使用相对单位如百分比或字型排印学调整大小,而不是绝对的单位如像素或点。

灵活的图像也以相对单位调整大小(最大到100%),以防止它们显示在包含它们的元素外面。

Media queries允许网页根据存取站点浏览设备的特点而使用不同CSS样式规则,最常用的是浏览器的宽度。

回应式网页设计变得更加重要,因为移动流量现在占网际网路流量的一半以上。

因此,Google宣布行动浏览设备时代的到来(Mobilegeddon)(2015年4月21日),并开始提高移动友好的网站的评级,如果搜寻是被从一个行动浏览设备发起。

GOOGLE及百度都喜欢RWD响应式设计

1.使用单一网址,减少重复的内容

2.降低网页跳离率(Bounce Rate),流畅的浏览动线规划

3.提高网页可用性,