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

Question

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

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

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

Answer 1

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



设备通道

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

专业版


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


骗局


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




引导程序

专业版


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


骗局


Bootstrap是一个巨大的框架，在最小化的CSS和JS文件中具有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。



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