HTML将iframe调整为响应式iframe

Question

您好我的网站上有一个iframe，宽度为728像素。

图片：http://s8.postimg.org/5r5d4wm7n/iframe.png

这是蓝色背景iframe。

我在移动设备上遇到问题，如下所示：http://s10.postimg.org/drrxc4ak9/iframe2.png

我应该如何将其修复为100％宽度，但仍然会在屏幕上显示所有728px？

谢谢！

Answer 1

你可以试试这个：

iframe {
 width: 728px;
}


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

然后，当屏幕宽度大小超过540px时，您的常规代码将起作用。在这种情况下，728px。当屏幕宽度大小为100px-540px时，iframe将为100％。

目前正在我的ipad上写，所以很难测试代码。如果有一些错误，我很抱歉。

希望这有帮助

Answer 2

尝试使用宽度和最大宽度的组合

iframe {
    width: 100%;
    max-width: 728px;
}