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

我还没有看到这个问题在这里问，但我想知道是否有人知道是否有可能有一个基于它的宽度的容器或父元素的媒体查询。用户案例是当你有一个菜单从左边弹出并减小主窗口容器的大小。下面是一个例子网站，你可以看到屏幕上弹出菜单打开，但页面上的内容不能改变基于其新的宽度CSS3媒体查询 - 容器的宽度而不是屏幕？

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

来源

2013-01-23 2ne

http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-屏幕这可能吗？不，这是不可能的。 – BoltClock

所以这不能用css3来完成，直到@element属性被添加。如果任何人正在使用高效的javascript或jquery方法来处理这个用例，那么我会接受这个答案 – 2ne

我仍然在积极寻找这个近乎一年的问题的答案，今天我发现这个：http：// codepen。 io/2ne/pen/zxBVjR？编辑= 110我不知道它是如何工作的，但它看起来确实回答了这个问题 – 2ne

我想你想的东西比你问什么不同。

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

重建你在这里发布的例子相当简单的重建，但已经（除了它的响应）与媒体查询无关。

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

您声明哪个元素和哪个选项应该是过渡的。下面是一个例子，其中，I配置改变元件的宽度或余量将启动的动画这需要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设置配置的。

我建议你阅读像https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

FYI：我重建类似的网站，你表现，就像一个证明的概念：http://jsfiddle.net/W3PF4/

来源

2013-01-23 13:41:32 SimonSimCity

不，你不能媒体查询方式，但你是什么要求可以用css来完成。我一直在为我的网站做这件事，并在sitepoint的家伙帮了很大的忙 - 看到帖子11在这里：http://www.sitepoint.com/forums/showthread.php?828454-CSS-Absolute-Positioning-Troubles&p=5061986&viewfull=1#post5061986

当边栏打开它把内容挤到右边&它的内容中心内。当然，你可以做到这一点，没有集中的内容，它会做你想做的。

来源

2013-01-23 13:42:00

我也一直在研究这个。到目前为止，我对安迪休谟的方法印象深刻http://blog.andyhume.net/responsive-containers/https://github.com/ahume/selector-queries/

来源

2013-07-01 15:56:21