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

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

---

我想你想要的东西与你想要的不同

媒体查询是指查询特定于您使用的设备（媒体）的内容，而不是用于制作动画或其他视觉内容

重建您在这里发布的示例非常简单，但（除了响应性）与媒体查询无关

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

您声明哪个元素和哪个选项应该是过渡的。下面是一个示例，其中我配置更改元素的宽度或边距将启动一个动画，该动画耗时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设置来配置的

我建议你读一些像这样的书

---

仅供参考：我重建了一些类似于您展示的网站的东西，只是为了证明概念：

不，您不能用这种方式进行媒体查询，但您所要求的可以用css完成。我一直在为我的网站做这件事，sitepoint的伙计们帮了不少忙——请看这里的第11篇文章：

---

当侧边栏打开时，它会向右挤压内容&它的内容中心在其中。当然，你可以在不使用中心内容的情况下完成这项工作，它将实现你的预期。

我也一直在研究这个问题。到目前为止，安迪·休谟的方法给我留下了深刻的印象

这可能是吗？不，这是不可能的。因此，在添加@element属性之前，css3无法实现这一点。如果有人使用高效的javascript或jquery方法来处理这个用例，那么我会接受这样的回答：我仍然在积极地寻找这个将近有一年历史的问题的答案，今天我发现：我不知道它是如何工作的，但看起来它确实回答了这个问题