css3 - 使SharePoint具有响应能力- Bootstrap 还是媒体查询?

标签 css3 responsive-design sharepoint-2013

我正在尝试使我的SharePoint网站具有响应能力
以便可以在ipad,iphone,平板电脑等设备上轻松查看。

用Bootstrap或媒体查询执行此操作的最佳方法是什么。

任何建议都会有很大帮助。

最佳答案

我当时的情况是选择在SP2013中使用哪种来实现响应式设计,因此我收集了pro和con的foreach技术。



设备通道

是的,即使在问题中未提及它们,我也正在谈论Device Channels,因为它们可以为最终用户和客户提供最佳的性能和可优化性-我认为:)

专业版


为每个设备单独设计的HTML/CSSJS
-无需隐藏或删除不兼容的元素
-更快,因为您只需加载真正需要的东西
-更快,因为您的CSS/JS and HTML可能会更少
-更快,因为您可以为每个设备使用优化的代码
-更好的是,您可以更好地指出哪个渠道有错误,并且更改不会影响其他渠道


骗局


为每个设备单独设计的HTML/CSSJS
-您必须将更改附加到每个母版页
-要完成相同的结果需要做更多的工作(通常)
-冗余
绑定到User Agent Strings
设备日益多样化
-可能等于母版页>>工作的多样化




引导程序

专业版


强大,易于使用的框架
-很多文档
-快速的结果
-如果您喜欢-所有Bootstrap样式
已经有项目在使用它,因此您可能不必从头开始构建它
-http://responsivesharepoint.codeplex.com/


骗局


Bootstrap是一个巨大的框架,在最小化的CSSJS文件中具有8000多行代码
-2个请求额外的〜130kb和30kb
-浏览器可以处理的许多样式和脚本
没有构建Bootstrap以便在SharePoint中使用
-它会覆盖SharePoint样式,从而使某些功能(例如ComposedLooks)的价值降低
-需要很多自定义CSS使其与SharePoint无缝协作
SharePoint有它自己的奇怪处理方式,并且会干扰BootStrap
-吨CSS
-吨JS
-吨HTML Attributes




媒体查询

专业版


只需要CSS
没有JS,如果你不想
您可以创建自己的布局
即使在IE6中也可以使用response.js
您可以轻松区分在某些屏幕尺寸下应该使用哪些功能


骗局


取决于CSS数量的几套Breakpoints
每个功能都需要自己开发
编写可处理每个SP2013页面的通用代码并不容易
-这取决于所显示内容的复杂性。我写了大约150行CSS,创建了一个移动视图,用于发布包含导航和内容但没有编辑等功能的页面。
-如果客户想要智能手机上的所有功能,则需要进行大量的工作和测试。 (加上到底谁想在他们的手机上这样做?)




结论

我不确定(要获得很多反馈给我的结果会很棒),但是我倾向于使用Media Queries。为什么呢好吧,SharePoint有它自己的方式来处理桌面用户,而且如果未明确订购,我不会自定义该内置功能。另一方面,SharePoint没有为智能手机提供真实的UI。我不想使用BootStrap,因为它包含很多样式,这会在品牌环境中产生问题。由于缺点,我不会使用Device Channels



你怎么看 ?我缺少重要的方面吗?还有其他更适合实现此目标的解决方案吗?

关于css3 - 使SharePoint具有响应能力- Bootstrap 还是媒体查询?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22929422/

相关文章:

jquery - 使用 CSS/JQUERY/HTML 居中多个响应式 Div

css - 响应式菜单隐藏在广告中

SharePoint 2013人员选择器检索用户的旧信息

html - 如何隔离Bootstrap CSS以避免与已下载模板的默认CSS样式发生冲突

css - 在固定轴上旋转CSS立方体

css - flex-basis和width有什么区别?

css - 用于 3-5 个元素的响应式 flexbox 网格

powershell - 使用Powershell和Windows身份验证访问sharepoint REST api

C# 将文件从 Azure Function 写入 SharePoint On-Prem

css - flex-basis和width有什么区别?