15

我需要一个引导容器来响应基于父 div 而不是媒体查询。如果可能的话，我无法找出最好的方法，尤其是不使用 javascript。目前，在调整大小时，我会计算.span*div 是否应为 100% 宽度（如果父 div 最终低于 640px）或尊重列 CSS。

这是一个jsfiddle。使用 's 内部的 CSS.somecontainer应该.span*像移动一样布局 - 所以每列应该全宽，例如，如果将 CSS 更改为 640 像素以上，它将重新布局到列布局。

有任何想法吗？

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

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

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

4

1 回答 1

7

通过使用 elementQuery polyfill，您应该能够做到这一点。这是gitHub 上的 repo，这是Smashing Magazine 上的一篇文章，它解释了有关该概念的更多信息，这是作者创建的用于演示如何使用它的 CodePen 。

本质上，您使用 CSS 根据父 div 定义断点。下面是一个语法示例：

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

以下是 Smashing Article 的相关引述：

介绍元素查询。元素查询类似于媒体查询，如果满足条件，将应用一些 CSS。元素查询条件（如 min-width、max-width、min-height 和 max-height）是基于元素的，而不是基于浏览器的。

于 2015-06-11T15:28:38.580 回答