如何将两个iframe并排居中，直到它们的最小宽度，然后将其宽度设置为100％？

Question

我正在尝试将两个iframe元素并排居中，它们都占据页面的一半（47.5％），直到它们的最小宽度为500px。我已经做到了，但是我想让这些iframe之一达到500px时，将其宽度更改为100％，这样当它们变得太小而无法并排放置时，它们便会彼此居中。目的是在一页上有两种形式。

我尝试使用媒体查询来解决此问题，但是从我可以在线找到并可以测试自己的角度来看，媒体查询不能测试iframe元素的宽度，而只能测试屏幕本身。

我已使用以下CSS代码尝试执行此操作：

iframe {
  width: 47.5%;
  min-width: 500px;
  margin: 0;

  float: left;
}

@media iframe and (max-width: 500px) {
  iframe {
    width: 100%;
  }
}

我希望这可以将iframe准确地调整为100％的大小，但是不幸的是，它没有，而且它们的大小保持不变。

希望您能在这里为我提供帮助，我们将不胜感激。

Answer 1

我通过在iframe上移除min-width并向媒体查询中添加max-width来解决此问题，然后将iframe的width设置为100%。

iframe {
  width: 47.5%;
  margin: 0;

  float: left;
}

@media (max-width: calc(500px*3.1)) {
  iframe {
    width: 100%;
  }
}