响应式网页设计 技术专题简介-编程知识网

简介

“内容就像水”，这是一个说明RWD原则的说法。 一个使网页上的多个元素在台式机、平板电脑、智能手机等不同分辨率的设备上适应的示例。层叠样式表CSS动画IE盒模型缺陷CSS filter无表格网页设计响应式网页设计教科书本模板： 查看讨论编辑回应式网页设计（英语：Responsive Web Design，通常缩写为RWD），或称自适应网页设计、响应式网页设计、对应式网页设计。是一种网页设计的技术，这种设计可使网站在不同的设备（从桌面电脑显示器到移动电话或其他移动设备）上浏览时对应不同分辨率皆有适合的呈现，减少用户进行缩放、平移和滚动等操作行为。对于网站设计师和前端工程师来说，有别于过去需要针对各种设备进行不同的设计，使用此种设计方式将更易于维护网页。此概念于2010年5月由美国网页设计师Ethan Marcotte所提出。采用 RWD 的网站使用CSS3 中的 Media queries（英语：Media queries），是针对 @media 查询的延伸应用，借由流体网格线和回应式的图片针对不同大小的设备提供对应的样式：流体网格线概念要求页面元素使用相对单位，如百分比或em调整大小，而不是绝对单位，如像素或点。回应式图片应以相对单位调整大小（最大到 100%），防止它们显示于它们的上层元素外。Media queries（英语：Media queries）允许页面根据浏览设备而使用不同 CSS 样式规则，最常用的是浏览器的宽度。回应式网页设计变得更加重要，是因为移动设备流量现在占互联网流量的一半以上。因此，Google 宣布移动设备时代的到来（Mobilegeddon）（2015年4月21日），如果搜索行为是来自移动设备，将会提高对移动设备友善的网站排名。。

相关概念

移动设备优先，不引人注目的 JavaScript 和渐进增强

“移动设备优先”和“非侵入式JavaScript”/“渐进增强”（规划新网站设计时的策略）是优先于 RWD 的概念：传统的手机浏览器不理解 JavaScript 或者 media queries，因此最初的建议做法是创建一个只有基本框架的网站，接着根据智能手机和电脑分别提供增强功能；而不是试着“优雅降级”——使一个复杂的网站在最传统移动电话上丧失某些功能。

基于浏览器，特性或设备探测的渐进增强

在一个网站必须支持缺乏 JavaScript 的基本的移动设备的情况下，浏览器 (用户代理) 探测 (也叫做“浏览器嗅探（英语：Browser-sniffing）”)，和移动设备探测（英语：Mobile device detection）是推断某些 HTML 和 CSS 特性是否受支持的两种方式 (作为渐进增强的基础)—然而，这些方法不完全可靠。

对于能力更强的移动电话和 PC，可以直接测试浏览器对 HTML/CSS 功能的支持 (识别设备或者用户代理字符串) 的 JavaScript 框架如 Modernizr, jQuery 和 jQuery Mobile（英语：JQuery Mobile）等流行起来。Polyfills（英语：Polyfill）可以被用于添加对一些功能的支持—比如，支持 media queries (RWD 所需要的)，和在 (旧版本) Internet Explorer 上提高 HTML 5 支持。功能探测在较旧的浏览器上也可能不完全可靠: 某些也许会报告一个特性可用，然而它或者是缺失，或者是实现的如此拙劣以至实质上无法工作。

挑战和其它办法

Luke Wroblewski 总结出了 RWD 和移动设计中的一些挑战，还创建了一个多设备布局模式的目录。他提议，比起单纯的 RWD 手段，Device Experience 或者 RESS (通过服务器端组件的响应式网页设计, Responsive Web Design with Server Side Components) 等方法可以提供对移动设备更加优化的用户体验。样式表语言如Sass的服务器端“动态 CSS（英语：Dynamic Cascading Style Sheets）”实现可以是这种做法的一部分。

RWD 的一个问题是横幅广告和视频不是流式的。然而搜索广告（英语：Search advertising）和 (横幅) 显示广告支持特定的设备平台目标，和为桌面，智能手机和基本的移动设备提供不同的广告尺寸格式。可以为不同平台使用不同的着陆页（英语：Landing page）URL，或者可以用 AJAX 显示一个页面上的不同广告变体。

历史

Ethan Marcotte 在他在 A List Apart（英语：A List Apart） 的文章中发明了术语 Responsive Web Design (RWD)。他在他 2011 年关于这个主题所写的简短的书中描述了响应式网页设计的理论和实践。响应式设计被 .net 杂志（英语：.net (magazine)） 列为 2012 年顶级网页设计趋势的第二名 (渐进增强是第一名)。他们也列出了 Ethan Marcotte 最喜欢的响应式站点之中的 20 个。