首页 > 代码库 > 在SharePoint 2013上面实施响应式设计
在SharePoint 2013上面实施响应式设计
在SharePoint 2013上面实施响应式设计
本文由SPFarmer翻译Ricardo的文章
学习如何在SharePoint上实施响应式设计，以让一个publishing site在不同的分辨率下有不同的显示。
我们都知道，网页设计师对于一个成功的SharePoint实施是至关重要的。基于这一点，我想为网页设计师写一篇文章。在这方面我不是权威的专家，我决定咨询一下在网页设计有资深经验的人。通过询问我的联系人，我得到了SharePointbranding和UX customization领域的一个专家-- EricOverfield的邮件。我和他开了一个还会，很快我们就谈论到了UX, branding, 艺术家,工程师, 以及SharePoint.
这个会话很快谈论到了设备比，以及图和让SharePoint在新的和不断变化的设备中能够显示的尽可能的好。Eric的回答是: 响应式网页设计.响应式网页设计允许我们的网站看起来像是流动的格子。这流动和动态的格子自动调整自己，以适应不同的显示器分辨率，比如手机，平板电脑，全尺寸的电脑显示器。要牢牢记住，如果你考虑这些设备可以横向或者垂直显示，那么显示器的分辨率的种类会加倍。
关于响应式设计的原始的文章的作者，Ethan Marcotte, 提供了一个 可供参考的网站来演示他的文章中的概念。在这个演示中，你可以观察到，当你改变你的当前的浏览器的尺寸的时候，网页中的元素是如何通过重新安排他们自己，来适应当前的分辨率的。这个演示让我思考，如何通过响应式设计思想的流动格子的特性，在SharePoint中实现网站能自适应不同的浏览器呢？幸运的是，Eric和其他人一起,开发了响应式SharePoint.响应式SharePoint是一个 CodePlex项目，你可以在你的SharePoint站点上尝试响应式设计。
我遵循了提供的说明，通过使用Design Manager，在一个out-of-the-box publishing站点中，安装了资源。立刻，我就可以观察，当我改变浏览器大小的时候，这个站点是如何动态的适应不同的分辨率了。我决定用下面的分辨路来测试这个项目:
· 1200x1900 (电脑桌面,纵向显示)
· 768x1366 (平板电脑,纵向显示)
· 480x800 (智能手机,纵向显示)
效果简直让人惊呆。不到10分钟,我就拥有了一个能够自动适应在设备中经常用到的分辨率的网站。下面的图显示了在常用分辨率下的显示:
这个是如何达到的?
在这篇文章中，我只可以解释，响应式SharePoint通过使用媒体查询，在匹配设备显示器的宽度，然后应用一系列的css，来在可用的空间内显示内容。为了达到这一点，你需要一个能够支持媒体查询的浏览器。主流浏览器的最新版本都支持这个功能。下面的代码显示了，如何声明一个媒体查询:
@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 andthinner
*/
}
@media(min-width:1200px) {
/*
Styles for display width
equal to 1200 pixels andwider
*/
}
当然这背后还有更多的逻辑.你可以浏览CodePlax上的响应式SharePoint 来查找更多的细节。
SharePoint 2013的新的设计和branding功能，是你能够容易的创建和修改你的网页设计，包括响应式设计。你甚至可以谁用你熟悉的一些工具，比如 mapping a network drive to theSharePoint 2013 Master Page Gallery.在我的例子里面，我使用MicrosoftExpression Web 4来浏览和编辑master pages和CSS 文件。
对于我们可以用在响应式网页设计中的新的设计和功能，我非常兴奋。可以通过浏览 What‘s new with SharePoint 2013 sitedevelopment获取更多内容。
- Ricardo
Eric Overfield is the co-founderof PixelMill.PixelMill is a company that offers products and services for brandingSharePoint starting with SharePoint 2007, and they have been in the web designbusiness since 1998. Eric is very passionate about the community for whom hedeveloped the CodePlex project Responsive SharePoint. He is also aspeaker at SharePoint events, such as SharePoint Saturdays, and is in theprocess of writing a book about responsive design and SharePoint 2013. You canread more about Eric’s work atPixelMill’s blog and follow him on Twitter @ericoverfield.
在SharePoint 2013上面实施响应式设计