我想要一个仅使用 CSS 的响应式 Bandcamp iframe，如 here（和许多其他地方）所述。但是，有两个问题：
如果我将页面放大到大于 700 像素的宽度，则 iframe 容器开始扩展的范围超过了 Bandcamp iframe 的能力。这会在 iframe 保持相同大小的同时将下面的文本向下推
一旦达到此限制，容器就不会居中。
我认为合乎逻辑的解决方案是以某种方式设置查看页面的设备宽度 > 700 px 以保持 iframe 无响应，例如
if screen-width > 700px
.responsive {
width: 700px;
...
}
else
.responsive {
width=100%;
...
}
有没有办法做到这一点？或者也许是更优雅的解决方案？
【问题讨论】：
标签： css iframe center responsive
max-width
在不更改任何其他内容的情况下限制 iframe 宽度的最快方法是添加 max-width 属性：
.responsive iframe {
max-width: 700px;
}
这是一个更新的Fiddle，展示了最大宽度方法。
实现此目的的另一种方法是使用媒体查询。
如果屏幕宽度大于 700，您可以添加类似这样的内容以将宽度限制为 700 像素。
@media only screen and (min-width: 700px) {
.responsive iframe {
width: 700px;
}
}
这是一个 Fiddle 演示媒体查询方法。
这里有一些资源可用于了解有关媒体查询的更多信息，它们确实是响应式 Web 开发的基石。
我错过了将 iframe 居中的原始要求。我已经用我推荐的居中方法更新了两个小提琴，即使用display: flex;。
.responsive {
display: flex;
flex-direction: column;
align-items: center;
}
这里有一些使用 flex 样式的资源：
虽然您可以使用 iframe 做一些巧妙的事情，但您应该意识到，除非您还控制 iframe 内部的代码，否则您无法使用嵌入式 iframe 获得真正的响应式体验。换句话说，没有从 iframe 中加载的页面发送显式消息（除非您构建 iframe 正在显示的页面并且还构建了来回发送消息的机制，否则几乎不会出现这种情况），或者没有一些严重粗糙的黑客攻击，父页面没有明显/干净的方式来了解 iframe 内的内容。因此，出于所有意图和目的，不可能（据我所知）计算 iframe 内容的大小以布置父页面。对于您的 Bandcamp 示例，父页面无法知道在任何给定时间 Bandcamp iframe 需要多高才能在 iframe 内容的底部不浪费空间。这只是 iframe 和浏览器安全策略如何工作的不幸现实。
希望这会有所帮助。祝你好运！
【讨论】：
#main-content 规则，因为您的页面上没有任何具有该 ID 的元素，所以它什么也没做。