31

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

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

4

3 回答 3

7

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

于 2013-07-01T15:56:21.770 回答
1

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

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

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

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

您声明哪个元素和哪个选项应该是过渡的。这是一个示例，我配置更改元素的宽度或边距将启动一个需要 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-class 来完成的，您看到的动画是由一个名为transition的 CSS3 设置配置的。

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

仅供参考：我重建了类似于您展示的网站的内容，作为概念证明：http: //jsfiddle.net/W3PF4/

于 2013-01-23T13:41:32.193 回答
1

不，您不能以这种方式进行媒体查询，但是您所要求的可以使用 css 来完成。我一直在为我的网站做这件事，sitepoint 的人帮了大忙 - 请参阅此处的帖子 11：http ://www.sitepoint.com/forums/showthread.php?828454-CSS-Absolute-Positioning-Troubles&p= 5061986&viewfull=1#post5061986

当侧边栏打开时，它会将内容压缩到右侧并且内容中心位于其中。当然，您可以在没有居中内容的情况下执行此操作，它会按照您的意图进行。

于 2013-01-23T13:42:00.563 回答