Question

我在我的项目中使用Bootstrap，并尝试在移动设备上查看时调整iframe的大小。问题是它将@media（max-width：600px）中的属性应用于站点的桌面版本，它似乎被压扁了。宽度工作正常，但高度自动属性在桌面屏幕上显示不佳。

HTML：

  <iframe src="./bootstrap-remake_files/9m056zu9yr.html" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" oallowfullscreen="oallowfullscreen" msallowfullscreen="msallowfullscreen" style="width: 768px; height: 432px;" width="768" height="432" mytubeid="mytube1"></iframe>

CSS：

@media (max-width:600px){
   iframe{
     width:100%; 
     height:auto;
   }
}

换句话说，我想要我的iframe

     width:100%; 
     height:auto;

仅限移动设备。

Answer 1

您的style="width: 100%; height: auto;"将覆盖您将通过CSS应用于iframe的任何样式，除非该属性标记为!important。

Bootstrap @media查询无效

1 个答案: