Question

我试图让这个嵌入加载一个200px的iframe，而移动屏幕的加载高度为140px。

<!DOCTYPE html>
<html>
<style type="text/css">
  @media only screen and (max-device-width: 480px) {
      .iframe {
        height:140px;
      }
  }
</style>

  <body style="margin:0px">

  <iframe width="100%" height="200" src="https://www.youtube.com/embed/FtveSk1N7Uo?enablejsapi=1&origin=http://domain.com&autoplay=1" frameborder="0" allowfullscreen></iframe>

  </body>
</html>

这不起作用

Answer 1

它不起作用，因为内联样式（iframe上的height="200"）优先于任何其他样式。此外，您的选择器不会与您的标记匹配 - 它应该是iframe（元素）而不是.iframe（一个类）。

尝试关闭iframe的height=200，并将其放在您的样式中的媒体查询之前：

iframe {
  height: 200px;
}

@media only screen and (max-device-width: 480px) {
  iframe {
    height:140px;
  }

}

另一方面，使用max-width代替max-device-width通常会更好。前者将您的小样式应用于小型笔记本电脑或桌面浏览器窗口;后者赢了。

Answer 2

<强>样本：

http://plnkr.co/edit/GcaMYbu1lEBJqL1OQnL2?p=preview

应该是iframe而不是.iframe。 ''是类的选择器和iframe这里不是一个类而是html元素，因此应该只提到元素名称。

  @media only screen and (max-device-width: 480px) {
      iframe {
        height:140px;
      }
  }

通过媒体查询设置iframe的高度

2 个答案: