Question

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

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

Answer 1

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

Answer 2

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

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

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

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

您声明哪个元素和哪个选项应该是过渡的。这是一个例子，我配置改变元素的 width 或 margin 将启动一个需要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

当侧边栏打开时，它会将内容添加到右侧＆amp;它是内容中心。当然，你可以用中心内容做到这一点，它会做你想要的。

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

3 个答案: