今天偶然看到一本书《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代码,加入到页面中,没有做更复杂的布局,只是为了举例,好了,不多说了,代码附后!

  下面是样式文件:

 <style type="text/css">
content div {
border: 1px black solid;
} @media screen and (max-width: 320px) {
#below320 {
background-color: red;
}
} @media screen and (min-width: 320px) and (max-width: 800px) {
#between320to800 {
background-color: red;
}
} @media screen and (min-width: 800px) and (max-width: 1280px) {
#between800to1280 {
background-color: red;
}
} @media screen and (min-width: 1280px) {
#pass1280 {
background-color: red;
}
}
</style>

  下面是HTML文件:

 <div id="content">
<div id="below320">小于320</div>
<br />
<div id="between320to800">大于320,小于800</div>
<br />
<div id="between800to1280">大于800,小于1280</div>
<br />
<div id="pass1280">超过1280</div>
<div>&#;</div>
</div>

总  结

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

SharePoint 2013 的HTML5特性之响应式布局的更多相关文章

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

    今天偶然看到一本书<Pro SharePoint 2013 Branding and Responsive Web Development>,看到SharePoint 2013基于HTML ...

  2. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  3. [html5] 学习笔记-响应式布局

    1.响应式布局介绍 响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供 ...

  4. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

  5. 浅谈html5 响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...

  6. html5 响应式布局

    一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为 ...

  7. 2013年最新流行的响应式 WordPress 主题【下篇】

    在这篇文章中,我们收集了一些在2013年发布的最好的免费的响应式 WordPress 主题.这些主题包括高级功能,如自定义模板.自定义窗口小部件.自定义菜单主题选项等.让我们来看看下面的清单,并希望你 ...

  8. 2013年最新流行的响应式 WordPress 主题【上篇】

    WordPress 是最流行的内容管理系统,经历了多年的发展和演变.它的成功体现在庞大的社区,数百万的用户,设计师和开发者推动着 WordPress 往更高的层次发展. 海量的免费主题是 WordPr ...

  9. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

随机推荐

  1. [Sql Server2008]树结构的递归算法

    http://blog.csdn.net/tonyzhou2008/article/details/5100683 本文主要讲述三个内容: 1.如何创建hierarychyid的表,插入数据及基本递归 ...

  2. ubuntu 添加管理员账户

    sudo adduser cat 输入密码即可 sudo adduser cat sudo 为cat 添加sudo 权限

  3. Android动画效果translate、scale、alpha、rotate详解

    动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...

  4. 清除SQL数据库的日志

    ALTER DATABASE [Fuliu_Test] SET RECOVERY SIMPLEALTER DATABASE [Fuliu_Test] SET RECOVERY FULLDBCC SHR ...

  5. BI项目需求分析书-模板

    目录 目录 .............................................................................................. ...

  6. PyAMF and django ForeignKey

    In order to support this, PyAMF needs to provide a synonym mapping between fields. Until then, you c ...

  7. maven中文乱码问题——打包错误

    工程采用GBK编码, web应用中的配置文件打包后,war包里的配置文件里的中文成乱码.   用notepad++打开后,可以看到是用utf-8格式的(可以通过菜单中的[格式]查看),也就是说,在经过 ...

  8. VS2012下安装NuGet

    关于NuGet的两篇文章:MSDN上的使用 NuGet 管理项目库,和博客园dudu的程序员,用NuGet管理好你的包包. VS2012下安装NuGet 在工具菜单下选择“扩展和更新”. 选择“联机” ...

  9. 【.Net底层剖析】2.stfld指令-给对象的字段赋值

    .Net底层剖析目录章节 1.[深入浅出.Net IL]1.一个For循环引发的IL 2.[.Net底层剖析]2.stfld指令-给对象的字段赋值 3.[.Net底层剖析]3.用IL来理解属性 引言: ...

  10. Android自定义之TextView跑马灯的监听

    TextView都有跑马灯的效果,如果说让你去监听跑马灯效果的执行,我觉得这个需求有点二了,但是也要实现. 思路: 1.自定义View  继承TextView   这种方法过于麻烦,只是监听一个跑马灯 ...