响应式网页设计

维基百科，自由的百科全书
跳转至： 导航、 搜索
Html5 css3 styling.svg

层叠样式表:

CSS動畫
IE盒模型缺陷
CSS filter
无表格网页设计
响应式网页设计
b:CSS
h:CSS

此模板：查看 · 讨论 · 编辑

响应式网页设计（英语：Responsive web design，通常縮寫为RWD）是一种网页设计的技術做法，该设计可使网站在多种瀏覽设备（从桌面电脑显示器到移动电话或其他流動產品裝置）上阅读和导航，同时减少缩放、平移和滚动。[1][2][3]

目录

响应式网页设计（RWD）的元素 [编辑]

采用 RWD 设计的网站[1][4]使用CSS3 Media queries（英语：Media queries），[3][5][6]即一种对 @media 规则的扩展[7]，以及流式的基于比例的网格[8]和自适应大小的图像[9][10][11][12]以适应不同大小的设备：

  • Media queries（英语：Media queries）允许网页根据访问站点设备的特点而使用不同 CSS 样式规则，最常用的是浏览器的宽度。
  • 流式网格概念要求页面元素使用相对单位如百分比或 EM（英语：Em (typography)） 调整大小，而不是绝对的单位如像素或点。[8]
  • 灵活的图像也以相对单位调整大小（最大到 100%），以防止它们显示在包含它们的元素外面。

相关概念 [编辑]

移动优先，不引人注目的 JavaScript 和渐进增强 [编辑]

「移动优先」和「Unobtrusive JavaScript」/「渐进增强（英语：Progressive enhancement）」（考虑一种新的网站设计时的策略）是先于 RWD 的相关概念: 基础的手机浏览器不理解 JavaScript 或者 media queries，因此建议的做法是创建一个只有基本框架的网站，然后再为智能手机和 PC 提供增强功能；而不是试着“优雅降级”——让一个复杂的，图像丰富的站点工作在最基本的移动电话上。[13][14][15][16]

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

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

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

挑战和其它办法 [编辑]

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

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

历史 [编辑]

Ethan Marcotte 在他在 A List Apart（英语：A List Apart） 的文章中发明了术语 Responsive Web Design (RWD)。[1]他在他 2011 年关于这个主题所写的简短的书中描述了响应式网页设计的理论和实践。[29]响应式设计被 .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. 
  2. ^ 2.0 2.1 Ethan Marcotte's 20 favourite responsive sites. .net magazine. October 11, 2011. 
  3. ^ 3.0 3.1 Gillenwater, Zoe Mickley. Examples of flexible layouts with CSS3 media queries. Stunning CSS3. 320. Dec. 15, 2010. ISBN 978-0-321-722133. 
  4. ^ Pettit, Zoe Nick. Beginner’s Guide to Responsive Web Design. TeamTreehouse.com blog. Aug. 8, 2012. 
  5. ^ Gillenwater, Zoe Mickley. Crafting quality media queries. Oct. 21, 2011. 
  6. ^ Responsive design—harnessing the power of media queries. Google Webmaster Central. Apr. 30, 2012. 
  7. ^ W3C @media rule
  8. ^ 8.0 8.1 Marcotte, Ethan. Fluid Grids. A List Apart. March 3, 2009. 
  9. ^ Marcotte, Ethan. Fluid images. A List Apart. June 7, 2011. 
  10. ^ Adaptive Images. 
  11. ^ Hannemann, Anselm. The road to responsive images. net Magazine. Sept. 7, 2012. 
  12. ^ Jacobs, Denise. 21 top tools for responsive web design. .net Magazine. August 23, 2011. 
  13. ^ Wroblewski, Luke. Mobile First. November 3, 2009. 
  14. ^ 14.0 14.1 Firtman, Maximiliano. Programming the Mobile Web. July 30, 2010: 512. ISBN 978-0-596-80778-8. 
  15. ^ Graceful degradation versus progressive enhancement. February 3, 2009. 
  16. ^ Designing with Progressive Enhancement. March 1, 2010: 456. ISBN 978-0-321-65888-3. 
  17. ^ 17.0 17.1 Server-Side Device Detection: History, Benefits And How-To. Smashing magazine. September 24, 2012. 
  18. ^ BlackBerry Torch: The HTML5 Developer Scorecard | Blog. Sencha. 2010-08-18 [2012-09-11]. 
  19. ^ Motorola Xoom: The HTML5 Developer Scorecard | Blog. Sencha. 2011-02-24 [2012-09-11]. 
  20. ^ Wroblewski, Luke. Mobilism: jQuery Mobile. May 17, 2011. 
  21. ^ 21.0 21.1 Wroblewski, Luke. Rolling Up Our Responsive Sleeves. February 6, 2012. 
  22. ^ Wroblewski, Luke. Multi-Device Layout Patterns. March 14, 2012. 
  23. ^ Wroblewski, Luke. Responsive Design ... or RESS. February 29, 2012. 
  24. ^ Wroblewski, Luke. RESS: Responsive Design + Server Side Components. September 12, 2011. 
  25. ^ Andersen, Anders. Getting Started with RESS. May 9, 2012. 
  26. ^ Snyder, Matthew; Koren, Etai. The state of responsive advertising: the publishers' perspective. .net Magazine. Apr. 30, 2012. 
  27. ^ Google AdWords Targeting (Device Platform Targeting)
  28. ^ JavaScript and Responsive Web Design Google Developers
  29. ^ Marcotte, Ethan. Responsive Web Design. 2011: 143. ISBN 978-0-9844425-7-7. 
来自“http://zh.wikipedia.org/w/index.php?title=响应式网页设计&oldid=26623345”