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类来完成这两种状态之间的切换，您看到的动画由名为transition的CSS3设置配置。

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

仅供参考：我重建了你所展示的网站，就像一个概念的证明： http ： //jsfiddle.net/W3PF4/

Answer 3

不，你不能以这种方式查询媒体，但你要求的可以用css完成。 我一直在为我的网站做这件事，并且在sitepoint帮助了很多人 - 请参见第11篇： http ： //www.sitepoint.com/forums/showthread.php？ 828454-CSS-Absolute-Positioning-Troubles&p = 5061986＆viewfull = 1＃post5061986

当侧边栏打开时，它会向内部搜索内容，并且内容中心位于其中。 当然，你可以用中心内容做到这一点，它会做你想要的。