响应式HTML网站中的响应式iframe

Question

我正在尝试制作iframe响应，以便在移动设备上正确查看等，以及我正在做什么，虽然它在移动设备上运行良好，但它会破坏正常显示屏上的iframe。

iframe就是那个

<div class="conti" align="center" >
<iframe id="extFrame" src="html5/Project1.html" height="600px" width=" 800px"></iframe>
</div>

并且css样式是

<style>
.conti {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}
.conti iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

上面的iframe全宽，但我想要800 * 600。 有什么帮助吗？

Answer 1

只需删除在css样式上定义的witdh和height属性，iframe就会生成所需的尺寸。

我希望它有所帮助。但是你只是给每个设备一个尺寸吗？这根本没有响应......你必须添加一些媒体查询。

这是一篇关于响应式设计的不同媒体查询的好文章：

Media Queries for Responsive Design

Answer 2

如果你想要它800x600然后说你想要800x600而不是100％x100％。

width: 800px;
height: 600px;