如何修复 iframe 的响应式 css

特拉维斯·纳什

我正在尝试并排嵌入两个 iframe，并根据屏幕宽度调整它们的大小。在小于 500px 的屏幕上，我希望第二个 iframe 在第一个下方“环绕”，并且都扩展到接近全宽。实际发生的情况是在小于 488px 的屏幕上，第二个 iframe 下降但都保持相同的宽度并保持相同的相对位置（第二个 iframe 保持在右侧）

到目前为止，这是我的代码：

.vimeo-wrapper {
        max-width: 1200px;
        position: relative;
        margin: 0 auto;
    }

    .vimeo-standard {
        float: left;
        height: 470px;
        width: 75%;
        border: 1px solid #000;
        margin: 1px;
    }
    .vimeo-chatbox {
        float: right;
        height: 470px;
        width: 24%;
        border: 1px solid #000;
        margin: 1px;
    }
    iframe {
        width: 100%;
        height: 100%;
    }


    *@media (max-width:750px) and (min-width:700px){
        .vimeo-standard {
            float: left;
            height: 294px;
            width: 74%;
            border: 1px solid #000;
            margin: 0 auto;
       }
       .vimeo-chatbox {
           float: right;
           height: 294px;
           width: 24%;
           border: 1px solid #000;
           margin: 0 auto;
       }
       iframe {
        width: 90%;
        height: 100%;
        }
    }
    
    *@media (max-width:699px) and (min-width:600px){
        .vimeo-standard {
            float: left;
            height: 252px;
            width: 74%;
            border: 1px solid #000;
            margin: 0 auto;
       }
       .vimeo-chatbox {
           float: right;
           height: 252px;
           width: 24%;
           border: 1px solid #000;
           margin: 0 auto;
       }
       iframe {
        width: 90%;
        height: 100%;
        }
    }
    *@media (max-width:599px) and (min-width:500px){
        .vimeo-standard {
            float: left;
            height: 210px;
            width: 74%;
            border: 1px solid #000;
            margin: 0 auto;
       }
       .vimeo-chatbox {
           float: right;
           height: 210px;
           width: 24%;
           border: 1px solid #000;
           margin: 0 auto;
       }
       iframe {
        width: 90%;
        height: 100%;
        }
    }
    *@media (max-width:499px) {
        .vimeo-standard {
            float: none;
            height: 200px;
            width: 100%;
            border: 1px solid #000;
            margin: 2px auto;
            padding-bottom: 10px;
       }
       .vimeo-chatbox {
           float: none;
           width: 100%;
           height: 200px;
           border: 1px solid #000;
           margin: 2px auto;
           padding-top: 5px;
       }
       iframe {
        width: 90%;
        height: 100%;
        }
    }

    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

<div class="vimeo-wrapper">
    <div class="vimeo-video vimeo-standard">
        <iframe src="/*test url */" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen="allowfullscreen" seamless>
        </iframe>
    </div>
    <div class="vimeo-chat vimeo-chatbox">
        <iframe src="/*test url 2*/" 
            frameborder="0" seamless>
        </iframe>
    </div>
</div>

我知道了

您的代码实际上看起来不错，问题在于您在 @media 查询之前放置的 * 字符（这不是有效的 CSS）。删除它们使一切对我有用：

.vimeo-wrapper {
  max-width: 1200px;
  position: relative;
  margin: 0 auto;
}

.vimeo-standard {
  float: left;
  height: 470px;
  width: 75%;
  border: 1px solid #000;
  margin: 1px;
}

.vimeo-chatbox {
  float: right;
  height: 470px;
  width: 24%;
  border: 1px solid #000;
  margin: 1px;
}

iframe {
  width: 100%;
  height: 100%;
}

@media (max-width:750px) and (min-width:700px) {
  .vimeo-standard {
    float: left;
    height: 294px;
    width: 74%;
    border: 1px solid #000;
    margin: 0 auto;
  }
  .vimeo-chatbox {
    float: right;
    height: 294px;
    width: 24%;
    border: 1px solid #000;
    margin: 0 auto;
  }
  iframe {
    width: 90%;
    height: 100%;
  }
}

@media (max-width:699px) and (min-width:600px) {
  .vimeo-standard {
    float: left;
    height: 252px;
    width: 74%;
    border: 1px solid #000;
    margin: 0 auto;
  }
  .vimeo-chatbox {
    float: right;
    height: 252px;
    width: 24%;
    border: 1px solid #000;
    margin: 0 auto;
  }
  iframe {
    width: 90%;
    height: 100%;
  }
}

@media (max-width:599px) and (min-width:500px) {
  .vimeo-standard {
    float: left;
    height: 210px;
    width: 74%;
    border: 1px solid #000;
    margin: 0 auto;
  }
  .vimeo-chatbox {
    float: right;
    height: 210px;
    width: 24%;
    border: 1px solid #000;
    margin: 0 auto;
  }
  iframe {
    width: 90%;
    height: 100%;
  }
}

@media (max-width:499px) {
  .vimeo-standard {
    float: none;
    height: 200px;
    width: 100%;
    border: 1px solid #000;
    margin: 2px auto;
    padding-bottom: 10px;
  }
  .vimeo-chatbox {
    float: none;
    width: 100%;
    height: 200px;
    border: 1px solid #000;
    margin: 2px auto;
    padding-top: 5px;
  }
  iframe {
    width: 90%;
    height: 100%;
  }
}

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

<div class="vimeo-wrapper">
  <div class="vimeo-video vimeo-standard">
    <iframe src="/*test url */" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen="allowfullscreen" seamless>
        </iframe>
  </div>
  <div class="vimeo-chat vimeo-chatbox">
    <iframe src="/*test url 2*/" frameborder="0" seamless>
        </iframe>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-08-16

我来说两句

0 条评论

登录后参与评论

上一篇：Flutter：如何使下面的图像小部件在 Stack 中起作用

如何修复 iframe 的响应式 css

如何修复 iframe 的响应式 css

蓝屏死机没有修复解决方案

计算数据帧中每行的NA

UITableView的项目向下滚动后更改颜色，然后快速备份

Node.js中未捕获的异常错误，发生调用

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

Linux的官方Adobe Flash存储库是否已过时？

验证REST API参数

ggplot：对齐多个分面图-所有大小不同的分面

Mac OS X更新后的GRUB 2问题

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

带有错误“ where”条件的查询如何返回结果？

用日期数据透视表和日期顺序查询

VB.net将2条特定行导出到DataGridView

如何从视图一次更新多行（ASP.NET - Core）

Java Eclipse中的错误13，如何解决？

尝试反复更改屏幕上按钮的位置 - kotlin android studio

离子动态工具栏背景色

应用发明者仅从列表中选择一个随机项一次

当我尝试下载 StanfordNLP en 模型时，出现错误

python中的boto3文件上传

在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID