CSS3媒体查询 - 容器宽度而不是屏幕宽度？

Question

我还没有在这里看到这个问题,但我想知道是否有人知道是否有可能基于容器或父元素基于它的宽度进行媒体查询.用户的情况是,当您从左侧弹出一个菜单并减小主窗口容器的大小时.这是一个示例网站,您可以在其中看到菜单弹出打开但页面上的内容无法根据其新宽度进行更改

http://tympanus.net/Tutorials/FullscreenBookBlock/

Answer 1

我也一直在研究这个问题.到目前为止,我对Andy Hume的方法印象深刻http://blog.andyhume.net/responsive-containers/ https://github.com/ahume/selector-queries/

Answer 2

我认为你想要的东西与你所要求的不同。

媒体查询旨在查询特定于您使用的设备（媒体）的内容，而不是执行动画或其他视觉内容。

重建您在此处发布的示例相当简单，但与媒体查询无关（除了它的响应能力）。

他们创建了一个普通页面，有两种状态。在一种状态下，只有内容可见，而在另一种状态下，菜单可见，并且内容部分（采用菜单的宽度）移出屏幕。

您声明哪个元素和哪个选项应该是过渡的。下面是一个示例，我将其配置为更改元素的宽度或边距将启动需要 3 秒的动画：

div {
  transition: width 3s, margin 3s;
  -moz-transition: width 3s, margin 3s;
  -webkit-transition: width 3s, margin 3s;
  -o-transition: width 3s, margin 3s;
}

这两种状态之间的切换是通过添加 css-class 来完成的，并且您看到的动画是由名为transition的 CSS3 设置配置的。

我建议阅读类似https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions的内容

仅供参考：我重建了类似您展示的网站的内容，只是作为概念证明：http://jsfiddle.net/W3PF4/