0

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

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

请问这个有解决办法吗？

4

3 回答 3

0

这是（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。

于 2014-04-25T15:04:41.230 回答
0

如果可能，一种简单的方法是将类名放在父容器上。但要做到这一点，您需要知道父级是如何在服务器端或 JS 上显示的。我还没有听说过 div 的“like-media-query”解决方案。

于 2013-06-19T12:50:26.330 回答
0

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

虽然我没有使用过这个，但在 GitHub https://github.com/wemakeweb/element-queries上有一个实验性的实现

这假设让您编写如下查询：

 @media only screen and (element: .widget) and (element-max-height: 30px)
于 2013-06-20T02:50:45.383 回答