Bootstrap @Media查詢不起作用

Question

我在項目中使用Bootstrap，並嘗試在移動設備上查看時調整iframe的大小。 問題在於它將@media（max-width：600px）中的屬性應用於站點的桌面版本，並且看起來像被壓縮了。 寬度可以很好地工作，但是height-auto屬性在桌面屏幕上不能很好地顯示。

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 。