如何根据窗口大小而不是 iframe 大小在 iframe 中应用引导响应类答案

【问题标题】：How to apply bootstrap responsive classes inside iframe based on window size and not iframe size如何根据窗口大小而不是 iframe 大小在 iframe 中应用引导响应类
【发布时间】：2017-01-31 21:57:33
【问题描述】：

我在包装器中有一个 iframe。包装器的宽度=350px，高度=450px。 iframe 采用此包装器的高度和宽度。

我的问题是当我使用引导程序的实用程序类时。 hidden-xs，它们甚至在桌面上也得到了应用。有没有什么方法可以根据窗口大小而不是 iframe 大小实际应用这些响应样式。 CSS 在 iframe 中加载。

我按照iFrame and media query issue 尝试了方法，但它似乎对我不起作用。

【问题讨论】：

媒体查询是基于视口的，对于iframe内的内容，iframe就是视口。你想要的目前是不可能的。 元素媒体查询已经被几个人提出了，但是还没有实现。
谢谢。这解释了，我将研究其他方法。拥有自己的 CSS 类并使用 device-width(max-device-width) 而不是 width 来定义样式会起作用，但这听起来不错吗？

标签： css twitter-bootstrap

【解决方案1】：

首先，

由于 iFrame 只是一个显示外部 HTML 文件的窗口，这意味着 iframe 本身就是一个窗口/浏览器屏幕。所以你必须首先让它响应：

https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

之后，您必须将引导类或其他任何内容应用于 iframe 中显示的外部 html 文件。换句话说创建另一个html文件，链接引导程序，按照您想要的方式设计 html，然后将其显示在 iframe 上。

我为我的网站做了同样的事情，它还没有完成，但是看看有什么想法。

http://urbanphenomena.net/shukri/#page3

如果您不希望对 iframe 进行任何更改...尝试将 iframe 添加到 div、类或其他任何内容之外，以便类的 CSS 不会影响 iframe

【讨论】：

iframe 确实是外部 HTML 文件的视口，但我不确定您是否完全理解了这个问题。 iframe 内容是响应式的，只是不是我想要的方式。感谢您的意见，问题下方的评论回答了它。