引导 @media 查询不起作用答案

【问题标题】：Bootstrap @media query not working引导 @media 查询不起作用
【发布时间】：2023-03-05 23:18:01
【问题描述】：

我在我的项目中使用 Bootstrap 并尝试在移动设备上查看时调整 iframe 的大小。问题在于它将@media (max-width:600px) 中的属性应用于站点的桌面版本，并且看起来被压扁了。 Width 可以正常工作，但 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;

仅在移动设备上。

【问题讨论】：

结尾的} 不见了？
在实际代码中。粘贴时错过了。

标签： html twitter-bootstrap

【解决方案1】：

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

【讨论】：

内联样式不再存在。还是不行
你的意思是媒体查询中的规则仍然没有应用，还是规则没有做你想要的？因为删除内联样式对我来说很好。