0

我正在研究响应式设计。我的页面包含 iFrame

例子 ：

    <iframe class="frame" src="www.google.com?embed=true&width=800&height=600" style="height:100%;width:100%;border:none;">
   </iframe>

您可以观察到我还将样式指定为宽度和高度：100%，以便 iframe 以响应方式显示。

问题是当我的 iframe 像

    <iframe class="frame" src="www.google.com?embed=true" style="height:100%;width:100%;border:none;">
   </iframe>

iframe 似乎可以在 iPhone 设备的宽度上正确调整。

如果我确实提到了高度和宽度，它不会像我定义的属性那样调整到 iphone 的宽度。

我试过这样：CSS

     @media only screen and (max-width: 400px), only screen and (max-device-width: 400px) {
      .frame{
             width:320px;

             }
   }

但是 iframe 正在从容器框架中弹出。

所以我只想知道如何重置“框架”类的样式，以便在 iphone 上显示的 iframe 将具有

<iframe src="www.google.com?embed=true"></iframe>

谢谢你。

4

1 回答 1

0

尝试这个：

<style type="text/css">

    @media only screen and (max-width: 400px) {
        .div {
            width: 300px;
        }
    }
</style>

这里还有更多

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
于 2013-05-03T10:50:03.057 回答