Javascript 基于父div实现引导响应的最佳方法？

我需要引导中的容器根据父div而不是媒体查询进行响应。如果可能的话，我想不出最好的方法，特别是不使用javascript。当前，在调整大小时，如果

.span*

divs应为100%宽度（如果父div最终低于640px），或遵守列CSS，则会计算出大小

这是一个jsfiddle。当CSS在

.somecontainer

上时，

.span*

的内部应该像移动一样进行布局-因此，如果您将CSS更改为640px以上，每个列都应该全宽，例如，它将重新布局为列布局

有什么想法吗

目前正在使用与此类似的代码（这并不理想）

$（文档）.ready（函数（）{
$（'.somecontainer'）。在（'resize'，function（）上{
if（$（'.somecontainer'）.width（）<640）{
$（'.somecontainer'）.addClass（'m'）；
}否则{
$（'.somecontainer'）.removeClass（'m'）；
});
});

---

通过使用elementQuery polyfill，您应该能够做到这一点。下面是，下面是对该概念的详细解释，下面是为演示如何使用它而创建的作者

基本上，您可以使用CSS基于父div定义断点。下面是一个语法示例：

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

以下是这篇精彩文章的相关引用：

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

---

你现有的代码有什么问题吗？@cimmanon显然没有，因为没有其他答案。

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