css - 如何修复 iframe 的响应式 css
问题描述
我正在尝试并排嵌入两个 iframe,并让它们根据屏幕宽度调整大小。在小于 500 像素的屏幕上,我希望第二个 iframe 在第一个 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>
推荐阅读
- python - IPython Console - Remove Line Number In[#] at Begining of line?
- c# - c# GPG 压缩和加密文件流
- elasticsearch - How do I update Elasticsearch timezone data?
- css - 使用 CSS 创意制作 SVG 动画?
- database - VM 上的持久磁盘与 Kubernetes 集群的托管数据库
- excel - 对于循环删除行,循环正在跳过行
- python - 如何在 pyglet 中使用调度函数为变量赋值?
- sql - 在where子句中查询日期和具体时间
- c# - Xamarin Forms Span 保留空白
- javascript - 如何将输入添加到现有 url