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

Question

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

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

- 2ne

---

这可能是您的问题链接？不，这是不可能的。 - BoltClock

所以在添加@element属性之前，无法使用css3完成这个任务。如果有人正在使用高效的javascript或jquery方法来处理这种情况，那么我会接受它作为答案。 - 2ne

我仍在积极寻找一个解答这个将近一年的问题，今天我发现了这个链接：http://codepen.io/2ne/pen/zxBVjR?editors=110 我不知道它是如何工作的，但它看起来确实回答了这个问题。 - 2ne

Answer 1

我也一直在研究这个问题。迄今为止，我对Andy Hume的解决方案印象深刻：http://blog.andyhume.net/responsive-containers/https://github.com/ahume/selector-queries/

- Jeff Schram

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类和CSS3设置中的动画来完成的，你所看到的动画被称为过渡(transition)。建议阅读类似https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions的内容。FYI：我重建了像你展示的网站，只是作为概念的证明：http://jsfiddle.net/W3PF4/。

- SimonSimCity

Answer 3

不，你不能用媒体查询实现这种方式，但可以使用css完成你所要求的。我已经在我的网站上实现了这一点，Sitepoint上的人帮了我很多忙-在这里查看第11篇文章: http://www.sitepoint.com/forums/showthread.php?828454-CSS-Absolute-Positioning-Troubles&p=5061986&viewfull=1#post5061986。当侧边栏打开时，它会将内容压缩到右侧，并使其内容居中。当然，如果你不需要居中内容，也可以这样做，以达到你想要的效果。

- Ryan King