基于父格的最佳方法，使引导响应？

Question

我需要在引导容器基于父DIV，而不是媒体查询响应。我想不出没有做到这一点，特别是不使用JavaScript，如果可能最好的方式。目前，关于调整大小，我计算，如果.span*的div应该是100％的宽度（如果父格低于640像素，结束了），或者尊重columning CSS。

这里是一个的jsfiddle。随着.somecontainer的.span*的内线应该布局，如果它是移动的CSS - 所以每列应该全部宽度，如果更改CSS以上为640px，例如，它会重新布局列布局。

有任何想法吗？

目前使用类似的代码（这是不理想的）

$(document).ready(function(){
  $('.somecontainer').on('resize',function(){
    if ($('.somecontainer').width() < 640) {
        $('.somecontainer').addClass('m');
    } else {
        $('.somecontainer').removeClass('m');
  });
});

http://jsfiddle.net/tsdexter/ArqUR/1/

Answer 1

通过使用elementQuery填充工具，你应该能够做到这一点。这里是repo on gitHub，这里是an article on Smashing Magazine解释更多关于这个概念，这里是a CodePen创建演示如何使用它的作者。

基本上你使用CSS来定义基于父DIV断点。下面是语法的例子：

header[min-width~="500px"] {
    background-color: #eee;
}

下面是从碎条相关报价：

介绍元素查询。一个元素查询类似于一个媒体查询，如果条件得到满足，一些CSS将被应用。元件查询条件（如最小宽度，最大宽度，最小高度和最大高度）是基于元素，而不是浏览器。