SharePoint2013 实现自适应网页设计

Categories: Other
Comments: No Comments
Published on: 2013 年 04 月 12 日

[原文发表地址] Implementing your responsive designs on SharePoint 2013

[原文发表时间] 2013/4/1 1:17 PM

本文将带你了解当你在实现一个自适应网页设计时, SharePoint发布网站如何对应不同的显示分辨率怎样改变外观及响

我们都知道,网页设计师是一个SharePoint网站成功的关键。考虑到这一点,我想为我们的SharePoint网页设计师写一篇文章。由于我本身不是这个项目的权威的人士,我决定去请教已经致力于网页设计中有一些时间的一些人。通过询问,我得到了SharePoint品牌推广和UX定制方面的一个专家的电子邮件地址, 他就是Eric Overfield。我发起了一个电话会议,很快,我们聊了起来并讨论起UX、品牌推广、艺术家、工程师,和SharePoint。

话题很快转向各种显示设备以及如何使SharePoint在新的和不断变化的显示器设备中尽可能地一样工作良好。 Eric的回答是:自适应网页设计。自适应网页设计,让网站看上去像流动的网格。这流动的,动态的网格会根据信息的显示分辨率来调整自己,显示分辨率在手机、平板电脑、以及一个完整的桌面显示器上是不同的。请记住,如果想网页纵向和横向都能在所有这些设备正常显示,网页的大小应该是这些设备的混合分辨率的两倍。

自适应网页设计原贴的作者,Ethan Marcotte提供了一个参考网站来演示他文章中解释的概念。在这个网站上,当你调整浏览器窗口的大小,你能观察到页面中的元素是如何重新调整自己以适应当前的分辨率。这个演示让我想知道, 如果SharePoint网站拥有自适应框架的流动网格特性的话,它将如何响应不同的分辨率。幸运的是,Eric,以及其他一些人,开发了自适应SharePoint。自适应SharePoint是一个CodePlex项目,你可以在你的SharePoint网站上尝试自适应框架。

根据提供的介绍文档,我在我定制的发布网站上使用Design Manager安装了之前我们提到的自适应框架。在任何时候,当我调整浏览器窗口的大小,我一直在观察页面中的元素是如何自动适应当前的分辨率。我决定采用以面的显示分辨率测试该项目:

•1200×1900(台式机,纵向)
•768×1366(平板电脑,纵向)
•480×800(智能手机,横向)

结果十分惊人。10分钟内,我建立了一个SharePoint网站,它自动适应常用设备的显示分辨率。下图比较了适用于几种常用的显示分辨率状态下的同一网站:

Figure 1. Comparison of resolutions of the SharePoint website using a responsive framework

图 1.使用自适应框架的SharePoint网站在不同分辨率下的对比

这是如何实现的?

在这篇文章中,我只能解释 自适应SharePoint使用media查询来匹配显示设备的宽度,然后采用一组样式在可用空间中呈现内容。对于这个工作,你的浏览器需支持media查询。最新版本的主流浏览器都支持这样的功能。下面的代码示例演示了如何声明media查询:

 

@media (min-width: 769px) and (max-width: 979px) {
    /*
        Styles for display width 
        between 769 and 979 pixels
    */
}

@media (max-width: 768px) {
    /*
        Styles for display width 
        equal to 768 pixels and thinner
    */
}

@media (min-width: 1200px) {
    /*
        Styles for display width 
        equal to 1200 pixels and wider
    */
}

 

 

 

当然它没那么简单。你可以浏览 自适应 SharePoint CodePlex项目来了解更多内容。

SharePoint 2013中这项新的设计和品牌推广特性可以很容易创建和编辑你的网页设计,包括自适应设计。你甚至可以使用你熟悉的工具,通过将网络驱动器映射到 SharePoint 2013 母版页样式库。就我而言,我使用微软Expression Web4来浏览和编辑母版页及CSS文件。

我很高兴了解到这项新的设计和品牌推广特性,以及如何在自适应网页设计中使用它们。如果你需更多信息,请查看SharePoint2013网站的新发展

- Ricardo

Eric Overfield的是PixelMill的联合创始人。 PixelMill公司从SharePoint 2007开始,就为SharePoint品牌推广提供的产品和服务,并自1998年以来,他们一直致力于网页设计业务。 Eric非常热爱他为之开发CodePlex项目-自适应SharePoint的社区。他同时也是SharePoint活动的发言人之一,比如SharePoint Saturdays;他也正在写一本关于自适应设计和SharePoint2013的书。想了解更多关于Eric的工作,你可以阅读PixelMill’的博客,或关注他Twitter @ericoverfield

 

 

No Comments - Leave a comment

Leave a comment


Welcome , today is 星期六, 2017 年 02 月 25 日