响应式网页设计
出自 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 显示一个页面上的不同广告变体。