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> </div> 10 </div>
总 结
当然,这样的响应式布局优点就是不同分辨率设备兼容性好,缺点是代码量偏大,隐藏元素影响加载速度。不过凡事都有利弊吧,不过也为将来多终端网站提供了一个不错的思路,也希望能对需要的人以帮助。
转载于:https://www.cnblogs.com/jianyus/p/3748972.html
SharePoint 2013 的HTML5特性之响应式布局相关推荐
- javafx响应式布局_JavaFX的响应式设计
javafx响应式布局 使用CSS技术,为您的网站创建响应式设计相对容易. 根据屏幕的大小,您可以使用其他CSS文件和布局. 在JavaFX中,乍一看似乎有些困难,因为CSS仅负责样式,而不负责布局. ...
- html响应式弹性布局,CSS3响应式布局之弹性盒子
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代 ...
- html怎么做成响应式的,怎么用html5完成响应式布局?
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...
- 【探索HTML5第二弹05】响应式布局(中),一步一步响应式布局
前言 前天初步探究了一次响应式布局,虽然花了一天功夫,做出来的东西还是不行,在此我还是认为要做响应式布局设计应该先行,应该先制作3个以上的设计图出来,但是对于手机来说,图片流量也是个问题,但是这个我们 ...
- html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 这个概念是为 ...
- 浅谈html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- SAP UI5 应用开发教程之三十三 - SAP UI5 应用的响应式布局特性(Responsiveness)试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- html5/css3响应式布局介绍
转载链接:http://www.51xuediannao.com/html+css/htmlcssjq/694.html html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流 ...
最新文章
- 美多商城之用户中心(收货地址1)
- 我总结的30条架构原则
- C++继承与派生(原理归纳)
- 什么是序列化?python pickle模块
- JAVA之获取JavaSwing单选框JRadioButton选中的值(内容)
- html性别选项卡,html选项卡
- 如何通向“广义人工智能”?LSTM 提出者之一Sepp Hochreiter:将符号 AI 与神经 AI 相结合...
- 【C语言】创建一个函数,判断某一正整数是否为素数,并调用这个函数找出1000以内所有素数...
- 【CCCC】L2-005 集合相似度 (25分),维护set数组去重,比较统计
- 软件分析与设计习题集
- android多音字转拼音工具分装
- 转载:ITRS/GCRS/J2000坐标系的相互转换
- python apply函数_Python中apply函数的用法实例教程
- 【激光雷达】5 款免费 LiDAR 软件工具
- 大众点评字体_大众点评字体加密
- 思科三层交换机开启ipv6路由功能_网络工程实战之三层交换机配置IPv6 DNS 示例...
- [Windows] 系统安装利器WinNTSetup4.2 x86/x64 Final单文件版
- js-url转换blob以及blob与base64的相互转换
- 文字怎么转语音?这些方法值得收藏
- opencv-python 详解直方图均衡(二)《再详细介绍直方图以及OpenCV中提供的函数使用》
热门文章
- 线性判别用于提取词向量_历年试题公开 | 2017级线性代数(I)期末试题
- mysql acid介绍_InnoDB ACID模型介绍
- html菜鸟ruby,ruby的基础语法
- mysql与其他数据库的区别_mysql与其他数据库的区别
- Spark.shuffle.file.buffer 参数入门
- scala面试题简要总结
- 【装饰者模式】Decorator Pattern
- 数字化转型背景下的金融交易业务中台实践
- HTML相对路径相对目录--上级目录及下级目录的写法
- jquery的validate的用法