随着移动设备使用量的不断增长,组织必须制定有效的移动策略以满足这一日益增长的需求。为了确保所有网络访问者都能获得理想的网页体验,必须对各种移动设备提供广泛的支持。这意味着网站必须根据访问者选择的设备进行适应。然而,创建这些针对特定设备的适应性一直是一个巨大的挑战。
许多网站维护着移动版本的网页内容。这些网站检测访问者的设备,并将用户重定向到子站点以提供定制化的体验。或者,网站可能使用相同的页面,但应用不同的HTML标记。这些技术对于少数设备来说效果不错,但要扩展这种策略以应对当今已经在使用中的大量网络设备是不可能的。对于每种设备,程序员、前端开发者和内容编写者都必须管理额外的网页内容版本。
响应式设计是一种设计理念,它使用“最佳实践”的网络标准来应对网络设备的极端多样性。通过使用CSS3媒体查询,网页可以根据设备的能力和限制进行适应。这意味着网页可以为每个访问者“逐步增强”或“优雅降级”。
Sitefinity CMS包含了可以轻松拖放到任何页面或模板上的布局。这些布局使用户能够轻松地在他们的网页上添加新的列(2列、3列等),而无需了解HTML,同时仍然产生“最佳实践”的DIV基础标记。
通过这些布局,Sitefinity已经知道网站中使用的设计结构。这使得Sitefinity客户能够轻松地将响应式设计规则附加到这些布局上。这些响应规则可以在Sitefinity中使用基于网络的界面定义。通过这个界面,网站管理员可以指示Sitefinity在访问者使用智能手机时将4列布局转换为4行布局。
此外,Sitefinity包括一个基于网络的预览模式,使内容作者能够快速预览他们在各种设备(如iPad、iPhone等)上的内容。通过使用拖放布局并将响应规则附加到这些布局上,Sitefinity客户可以快速创建能够适应无限数量设备的网页。因此,组织可以专注于创建引人注目的内容,而不是无数次地重新创建内容。
在其核心,响应式设计依赖于媒体查询来定义不同分辨率的不同样式。媒体查询受到所有基于WebKit的浏览器(Safari、Firefox、Chrome)的支持,并通过一些jQuery插件在IE中得到支持。
以下代码在Sitefinity中实现,使网站立即适用于移动设备:
@media only screen and (max-width: 600px) {
/* 针对小屏幕的样式 */
}
@media only screen and (min-width: 601px) and (max-width: 1024px) {
/* 针对中等屏幕的样式 */
}
@media only screen and (min-width: 1025px) {
/* 针对大屏幕的样式 */
}