全球专业中文经管百科,由121,994位网友共同编写而成,共计436,047个条目

响应式网页设计

用手机看条目

出自 MBA智库百科(https://wiki.mbalib.com/)

响应式网页设计(Responsive web design,RWD)

目录

什么是响应式网页设计

  响应式网页设计或称自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页设计的技术做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其他移动产品设备)上阅读和导航,同时减少缩放、平移和滚动。

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

响应式网页设计的元素

  采用RWD设计的网站使用CSS3 Media queries,即一种对媒体规则的扩展,以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备:

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

响应式网页设计的挑战的方法

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

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

本条目对我有帮助0
MBA智库APP

扫一扫,下载MBA智库APP

分享到:
  如果您认为本条目还有待完善,需要补充新内容或修改错误内容,请编辑条目投诉举报

本条目由以下用户参与贡献

苏青荇.

评论(共0条)

提示:评论内容为网友针对条目"响应式网页设计"展开的讨论,与本站观点立场无关。

发表评论请文明上网,理性发言并遵守有关规定。

打开APP

以上内容根据网友推荐自动排序生成

官方社群
下载APP

闽公网安备 35020302032707号