回应式网页设计(英语:Responsive Web Design,通常缩写为RWD),或称自适应网页设计、响应式网页设计、对应式网页设计。
是一种网页设计的技术,这种设计可使网站在不同的装置(从桌面电脑显示器到行动电话或其他行动装置)上浏览时对应不同解析度皆有适合的呈现,减少使用者进行缩放、平移和卷动等操作。
对於网站设计师和前端工程师来说,有别於过去需要针对各种设备进行不同的设计,使用此种设计方式将更易於维护网页。
此概念於2010年5月由美国网页设计师Ethan Marcotte所提出。
采用RWD的网站使用CSS3中的Media queries,是针对 @media 查询的延伸应用,藉由流体格线和回应式的图片针对不同大小的装置提供对应的样式:
流体格线概念要求页面元素使用相对单位,如百分比或em调整大小,而不是绝对单位,如像素或点。
回应式图片应以相对单位调整大小(最大到 100%),防止它们显示於它们的上层元素外。
Media queries允许页面根据浏览装置而使用不同 CSS 样式规则,最常用的是浏览器的宽度。
回应式网页设计变得更加重要,是因为行动装置流量现在占网际网路流量的一半以上。因此,Google 宣布行动装置时代的到来(Mobilegeddon)(2015年4月21日),如果搜寻行为是来自行动装置,将会提高对行动装置友善的网站排名。。
相关概念
行动装置优先,不引人注目的 JavaScript 和渐进增强
「行动装置优先」和「非侵入式JavaScript」/「渐进增强」(规划新网站设计时的策略)是优先於 RWD 的概念:传统的手机浏览器无法理解 JavaScript 或者 media queries,因此最初的建议做法是建立一个只有基本框架的网站,接着根据智慧型手机和电脑分别提供增强功能;而不是试着“优雅降级”——使一个复杂的网站在传统手机上丧失某些功能。
基于浏览器,特性或设备探测的渐进增强
在一个网站必须支持缺乏 JavaScript 的基本的移动设备的情况下,浏览器 (用户代理) 探测 (也叫做「浏览器嗅探」),和移动设备探测是推断某些 HTML 和 CSS 特性是否受支持的两种方式 (作为渐进增强的基础)—然而,这些方法不完全可靠。
对于能力更强的现代手机PC,可以直接测试浏览器对 HTML/CSS 功能的支持 (识别设备或者用户代理字符串) 的 JavaScript 框架如 Modernizr, jQuery 和 jQuery Mobile等流行起来。Polyfills可以被用于添加对一些功能的支持—比如,支持 media queries (RWD 所需要的),和在 (旧版本) Internet Explorer 上提高 HTML 5 支持。功能检测在较旧的浏览器上可能并不可靠:某些浏览器可能报告某个特性可用,但实际上要么缺失,要么因实现不完善而无法正常工作。
挑战和其它办法
Luke Wroblewski 总结出了 RWD 和移动设计中的一些挑战,还创建了一个多设备布局模式的目录。他提议,比起单纯的 RWD 手段,Device Experience 或者 RESS (通过服务器端组件的响应式网页设计, Responsive Web Design with Server Side Components) 等方法可以提供对移动设备更加优化的用户体验。样式表语言如Sass的服务器端「动态 CSS」实现可以是这种做法的一部分。
RWD 的一个问题是横幅广告和视频不是流式的。然而搜索广告和 (横幅) 显示广告支持特定的设备平台目标,和为桌面,智能手机和基本的移动设备提供不同的广告尺寸格式。可以为不同平台使用不同的着陆页URL,或者可以用 AJAX 显示一个页面上的不同广告变体。
历史
Ethan Marcotte 在他在 A List Apart 的文章中发明了术语 Responsive Web Design (RWD)。他在他 2011 年关于这个主题所写的简短的书中描述了响应式网页设计的理论和实践。响应式设计被 .net 杂志 列为 2012 年顶级网页设计趋势的第二名 (渐进增强是第一名)。他们也列出了 Ethan Marcotte 最喜欢的响应式站点之中的 20 个。
资料性质:开放百科知识资料,非即时新闻。原文:https://zh.wikipedia.org/w/index.php?curid=3202198&oldid=93371212;原作者:维基百科贡献者(作者名单见原文历史记录)。本文按CC BY-SA 4.0转载与整理,许可:https://creativecommons.org/licenses/by-sa/4.0/。修改内容:繁体转简体、去除网页导航、按完整段落节选并整理排版;未声称原创。
图片:Stéphanie Walter;CC BY-SA 3.0;https://creativecommons.org/licenses/by-sa/3.0;来源:https://commons.wikimedia.org/wiki/File:Content-is-like-water.svg;图片未作修改。
资料来源
- 维基百科贡献者;CC BY-SA 4.0;节选、繁转简与排版整理,正文保留原文及许可URL
