Question

我想要实现的是相对于父容器宽度的自适应内部内容布局。如果使用CSS媒体查询是一个选项，不太确定，因为它们指的是屏幕宽度而不是特定的容器宽度。我希望相同的代码在2,3或4列中显示一组缩略图，具体取决于它所包含的容器。

我正在寻找一种“自动化”的方式，而不是手动玩css。换句话说，如果有意义的话，“响应式布局”将使用“max-parent-container-width”而不是max-“device-width”。

请问有解决方法吗？

Answer 1

如果可能，一种简单的方法是在父容器上放置一个类名。但要做到这一点，你需要知道如何在服务器端或JS上显示父级。我没有听说过div的“喜欢媒体查询”解决方案。

Answer 2

有一个称为元素查询（http://www.xanthir.com/b4PR0）的概念可以解决这个问题。

虽然我没有使用过这个，但在GitHub https://github.com/wemakeweb/element-queries

上有一个实验性实现

这可以让你编写如下的查询：

 @media only screen and (element: .widget) and (element-max-height: 30px)

Answer 3

这是（IMO）一个更好的解决方案，它提供与媒体查询的API表面1：1奇偶校验，但作用于单个元素：http://www.backalleycoder.com/2014/04/18/element-queries-from-the-feet-up/（包括脚本和演示）。虽然它使用的语法/方法有点不同它完全是动态的，因此在更改样式或查询规则时不需要调用方法，它涵盖了您可以在媒体查询中执行的任何操作。

一旦你包含了微小的100 LOC脚本，你可以使用以下内容设置元素样式：

<强> HTML

<section media="query(small, (max-width: 300px) and (max-height: 300px))">

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>

</section>

<强> CSS

section[matched-media~="small"] {
  font-size: 50%; /* small text for a wee lil element! */
}

/* Multiple matches example: */

section[matched-media~="small skinny"] {
  ...
}

将query()声明放在任何元素的media=""属性中，然后在匹配查询时，脚本会将其添加到元素的matched-media=""属性中。您可以在页面生命周期的任何时候向新元素添加查询（只需使用setAttribute('media', ...)），它永远不需要您调用任何JS，所有属性解析和查询匹配都是异步和自动的！在上面提到的文章中查看关于解决方案机制的更详细的解释 - 它包括一个演示，以及两个版本的脚本的repos。

如何动态调整子元素的布局到父容器的宽度？

3 个答案: