css - 使 Bandcamp iframe 响应 - 居中和溢出问题

Question

我想要一个仅使用 CSS 的响应式 Bandcamp iframe，如所述here (以及许多其他地方)。但是，有 2 个问题:

1. 如果我将我的页面放大到宽度大于 700 像素，iframe 容器开始扩展超过 Bandcamp iframe 的能力。这会在 iframe 保持相同大小的情况下下推下面的文本

2. 一旦达到这个限制，容器就不会居中。

我认为合乎逻辑的解决方案是在查看页面的设备宽度 > 700 像素时以某种方式进行设置，以保持 iframe 无响应，例如

if screen-width > 700px
   .responsive {
      width: 700px;
      ...
   }
else
   .responsive {
      width=100%;
      ...
   }

有没有办法做到这一点？或者更优雅的解决方案？

这是 fiddle :https://jsfiddle.net/zg2cL06s/1/

Answer 1

解决方案一:最大宽度

在不改变任何其他内容的情况下限制 iframe 宽度的最快方法是添加 max-width 属性:

.responsive iframe {
  max-width: 700px;
}

这是更新的 Fiddle演示最大宽度方法。

---

方案二:媒体查询

实现此目的的另一种方法是使用媒体查询。

如果屏幕宽度大于 700，您将添加类似这样的内容以将宽度限制为 700px。

@media only screen and (min-width: 700px) {
  .responsive iframe {
    width: 700px;
  }
}

这是一个 Fiddle演示媒体查询方法。

这里有一些资源可以帮助您了解更多有关媒体查询的信息，媒体查询确实是响应式 Web 开发的基石。

• > https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
• > https://www.w3schools.com/css/css_rwd_mediaqueries.asp
• > https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

---

编辑:居中

我错过了您最初要求将 iframe 居中的要求。我已经用我推荐的居中方法更新了两个 Fiddles，即使用 display: flex;。

.responsive {
  display: flex;
  flex-direction: column;
  align-items: center;
}

这里有一些使用 flex 样式的资源:

• > https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
• > https://www.w3schools.com/css/css3_flexbox.asp
• > https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• > https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

---

关于 iframe 的注意事项

虽然您可以使用 iframe 做一些聪明的事情，但您应该意识到，除非您还控制了 iframe 内部的代码，否则您无法通过嵌入式 iframe 获得真正的响应体验。换句话说，如果没有从 iframe 中加载的页面发送明确的消息(除非您构建了 iframe 显示的页面并且还构建了来回发送消息的机制，否则几乎不会出现这种情况)，或者没有一些严重粗糙的黑客攻击，父页面没有明显/干净的方式来了解 iframe 内的内容。因此，出于所有意图和目的(据我所知)不可能计算用于布​​局父页面的 iframe 内容的大小。对于您的 Bandcamp 示例，父页面无法知道 Bandcamp iframe 在任何给定时间需要多高，以便 iframe 内容底部没有浪费空间。这只是 iframe 和浏览器安全策略如何运作的不幸现实。

---

希望这对您有所帮助。祝你好运!