2013基于HTML5的响应式的布局,就简单的尝试了一下,感觉还不错。当页面在不同的浏览器可视区域上浏览的时候,会通过不一样的css文件来进行展示,使用户在浏览页面中能尽可能的达到最佳体验。

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

SharePoint HTML5特性之响应式布局 实例教程

(浏览器的可视区域为1380)

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

SharePoint HTML5特性之响应式布局 实例教程

(浏览器的可视区域为920px)

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

SharePoint HTML5特性之响应式布局 实例教程

(浏览器的可视区域为600px)

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

SharePoint HTML5特性之响应式布局 实例教程

(浏览器的可视区域为290px)

  当然,真正要做好一个响应式布局,肯定不是这样简单的,需要复杂的设计和Css编写,代码量很大,这里只是一个最简单的例子,让大家了解sharepoint中的这一html5特性而已。我这里只是写了Css文件和Html代码,加入到页面中,没有做更复杂的布局,只是为了举例,好了,不多说了,代码附后!

  下面是样式文件:

SharePoint HTML5特性之响应式布局 实例教程
 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>
SharePoint HTML5特性之响应式布局 实例教程

   下面是HTML文件:

SharePoint HTML5特性之响应式布局 实例教程
 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>
SharePoint HTML5特性之响应式布局 实例教程

总  结

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注