如何修复 iframe 的响应式 css

Question

我正在尝试并排嵌入两个 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>

Answer 1

您的代码实际上看起来不错，问题是您在 @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>