如何在 Drupal 7 Omega 子主题中根据浏览器大小删除页面元素答案

【问题标题】：How to remove page elements based on browser size in a Drupal 7 Omega sub-theme如何在 Drupal 7 Omega 子主题中根据浏览器大小删除页面元素
【发布时间】：2012-12-03 10:35:08
【问题描述】：

我一直在研究使用 Omega 子主题的响应式设计。与 context 和 delta 模块结合使用时，它似乎非常强大。但是，我很难理解如何在响应式网站中选择性地删除部分页面。当我说删除时，我并不是说隐藏，而是实际上阻止呈现指定的内容（这样移动浏览器就不必浪费时间下载从不显示的内容）。

Omega 提供了根据浏览器大小将不同的 CSS 应用到页面的能力（通过使用媒体查询标签）。增量和上下文模块用于根据特定条件更改页面元素的排列，甚至删除页面元素。但是，我一直无法弄清楚如何将两者结合起来。

例如，是否有可能不仅在不同的浏览器窗口大小上应用不同的 CSS，而且还可以防止某些页面内容同时呈现？

我无法找到有关此的任何信息。我猜测，因为页面内容是在服务器端呈现的，而媒体查询在客户端工作，所以这可能是不可能的。我很想知道是否有人对我如何实现这一目标有任何想法。

【问题讨论】：

我很想被证明是错误的，但我刚刚花了一周的时间研究同样的事情，而且没有很好的方法来做到这一点。问题与 Drupal 无关，您需要想象如何为 any 网站执行此操作。媒体查询发生在客户端，因此页面内容已经存在，除非您实现某种基于媒体查询的 AJAX 块传递系统。或者用 Varnish、cookies 和 ESI 做一些疯狂的事情。如果这些不是一个选项，请节省自己的研究时间，只需使用 CSS 隐藏块。供参考：drupal.stackexchange.com/questions/50850
看起来可以使用 mobile_tools 模块，结合 Browscap，通过 Delta 和 Context 模块切换 Omega 主题布局。还不能测试这个。但我想这在理论上是可能的。
理论上可以使用浏览器检测，当然，但如果不付出一些努力，就不能使用普通的媒体查询。或者至少这是我迄今为止发现的，如果有人能证明这是错误的，那就太好了！

标签： drupal drupal-7 drupal-theming

【解决方案1】：

你应该看看上下文断点模块。它允许您根据最终用户的浏览器大小、纵横比和分辨率设置上下文条件。

http://drupal.org/project/context_breakpoint

【讨论】：

谢谢德斯蒙德，这看起来很有趣。我去看看。

【解决方案2】：

不确定是否适合你，但是当我做一个显示时：无 - 一切都消失了，周围的 div 很好地洗牌：

@include breakpoint($phone){
      .l-header_search {
       display:none;
       } 
}

【讨论】：