css - 我可以在 iFrame 中使用 CSS @media 来响应父级的视口宽度吗？

Question

我有一个带有中央 iFrame 的页面，两侧有两个侧边栏左/右，我正在尝试使 iFrame 的内容响应。我已经在 CSS 样式表中使用 @media 查询设置了父窗口，因此当视口宽度减小时它会更改布局（我正在向下工作 PC 屏幕，而不是向上移动屏幕）。此布局更改（除其他外）是相对于移动视图的中心 iFrame 将侧边栏从左/右切换到上/下。

问题是 iFrame 的视口。当我在 iFrame 的 CSS 表中使用 @media 的最大宽度时，它使用 iFrame 的内部宽度作为视口宽度。这给我带来了麻烦，因为当将父窗口中的侧边栏切换到顶部/底部位置时，iFrame 的大小从最小桌面视图中的 ~540px 变为最大移动视图中的 ~860px，所以我无法设置 @media max-width 查询而不在任一侧创建重叠 - 在移动父 CSS 上显示 PC 预期的 iFrame CSS，反之亦然。

我也不想使用 max-device-width ，因为那样内容不再响应PC 上浏览器窗口的大小调整，因为它指的是屏幕大小而不是浏览器窗口大小。（这对我来说很重要，因为它可以让我快速测试响应能力，并允许人们在非最大化浏览器页面上使用该页面。）

有没有办法让 iFrame 的内容响应父窗口的大小，而不是它本身或屏幕？

我可以控制所有涉及的元素，因此如果无法做到这一点，我还可以将 iFrame 更改为 PHP 包含语句，并以这种方式将中心面板内容放在页面上。

标签： cssiframemedia-queries