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

Posted 2023-03-06

【中文标题】CSS3 媒体查询 - 容器的宽度而不是屏幕的宽度？

【英文标题】：CSS3 Media Query - Width of container rather than screen?

【发布时间】：2013-01-06 17:06:33

【问题描述】：

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

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

【问题讨论】：

***.com/questions/12251750/… 这可能吗？不，这是不可能的。

所以在添加@element 属性之前，css3 无法做到这一点。如果有人使用有效的 javascript 或 jquery 方法来处理这个用例，那么我会接受它作为答案

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

【参考方案1】：

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

【参考方案2】：

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

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

【参考方案3】：

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

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

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

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

您声明哪个元素和哪个选项应该是过渡的。这是一个示例，我配置更改元素的 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/