SharePoint 2013 的HTML5特性之响应式布局

　　今天偶然看到一本书《Pro SharePoint 2013 Branding and Responsive Web Development》，看到SharePoint 2013基于HTML5的响应式的布局，就简单的尝试了一下，感受还不错。当页面在不一样的浏览器可视区域上浏览的时候，会经过不同的css文件来进行展现，使用户在浏览页面中能尽量的达到最佳体验。

　　下面简单看看效果，在1380px浏览器可视区域中浏览，下面的css生效：

（浏览器的可视区域为1380）

　　在920px浏览器可视区域中浏览，下面的css生效：

（浏览器的可视区域为920px）

　　在600px浏览器可视区域中浏览，下面的css生效：

（浏览器的可视区域为600px）

　　在290px浏览器可视区域中浏览，下面的css生效：

（浏览器的可视区域为290px）

　　固然，真正要作好一个响应式布局，确定不是这样简单的，须要复杂的设计和Css编写，代码量很大，这里只是一个最简单的例子，让你们了解sharepoint中的这一html5特性而已。我这里只是写了Css文件和Html代码，加入到页面中，没有作更复杂的布局，只是为了举例，好了，很少说了，代码附后！

　　下面是样式文件：

 1 <style type="text/css">
 2     content div {
 3         border: 1px black solid;
 4     }
 5 
 6     @media screen and (max-width: 320px) {
 7         #below320 {
 8             background-color: red;
 9         }
10     }
11 
12     @media screen and (min-width: 320px) and (max-width: 800px) {
13         #between320to800 {
14             background-color: red;
15         }
16     }
17 
18     @media screen and (min-width: 800px) and (max-width: 1280px) {
19         #between800to1280 {
20             background-color: red;
21         }
22     }
23 
24     @media screen and (min-width: 1280px) {
25         #pass1280 {
26             background-color: red;
27         }
28     }
29 </style>

 　　下面是HTML文件：

 1 <div id="content">
 2     <div id="below320">小于320</div>
 3     <br />
 4     <div id="between320to800">大于320，小于800</div>
 5     <br />
 6     <div id="between800to1280">大于800，小于1280</div>
 7     <br />
 8     <div id="pass1280">超过1280</div>
 9     <div>&#160;</div>
10 </div>

总  结

　　固然，这样的响应式布局优势就是不一样分辨率设备兼容性好，缺点是代码量偏大，隐藏元素影响加载速度。不过凡事都有利弊吧，不过也为未来多终端网站提供了一个不错的思路，也但愿能对须要的人以帮助。