Question

我正在开展响应式设计..我的页面包含iFrames

示例：

    <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正在从容器框架中弹出。

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

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

谢谢。

Answer 1

试试这个：

<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) {}

如何在我的网页的特定上下文中重置iframe属性。不使用javascript

1 个答案: