Question

我创建了这个抽搐嵌入流iframe，它与聊天并行工作很好，完善了我想要的方式，代码在下面

.t_container{
    display: inline-table;
    width: 100%; 
    }
    .ts_iframe{
    display: table-cell;
    width: 100%; 
    }
    .tc_iframe{ 
    width: 250px;
    float:right;
    }

    <div class="t_container">
    <div class="ts_iframe">
    <iframe frameborder="0" height="250" width="100%" scrolling="no" src="http://www.twitch.tv/esl_lol/embed"></iframe>
    </div>
  
    <div class="tc_iframe">
    <iframe frameborder="0" height="250" width="100%" scrolling="no" src="http://www.twitch.tv/esl_lol/chat"></iframe>
    </div>
  
    </div>

但现在我不知道如何让它成为响应，我的意思是，我可以让iframe响应，但你可以看到iframe并排，嵌入聊天较小，我很难应用响应式css，因为我对它不太好，所以它是否可能成为这样，当在像“iPhone”这样的小屏幕上访问嵌入式聊天时，嵌入式视频？

Answer 1

尝试将其附加到其他CSS的末尾：

@media (max-width: 768px) {
    .t_container { display: block; }
    .t_container .tc_iframe { display: block; width: 100%; float:none; }
}

对于768像素宽或更小的屏幕，它会将您的表格单元格方法转换为块。

Answer 2

使用媒体查询来控制某些断点处的输出。在这种情况下，您可以使用与Bootstrap相同的概念（也可以）。让它们100％宽度！当然，请确保你漂浮它们。

@media (max-width: 768px) {
  .ts_iframe, .tc_iframe {
      float: left; 
      width: 100%;
  }
}

Herr是DEMO

两个iframe并排而敏感？

2 个答案: