我试图让这个嵌入加载一个 200 像素的 iframe，并为移动屏幕加载 140 像素的高度。
<!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>
虽然这不起作用
最佳答案
它不起作用，因为内联样式(iframe 上的 height="200")优先于任何其他样式。此外，您的选择器将与您的标记不匹配 - 它应该是 iframe(元素)而不是 .iframe(一个类)。
尝试将 height=200 从 iframe 中取出，并将其放在您的样式中的媒体查询之前:
iframe {
height: 200px;
}
@media only screen and (max-device-width: 480px) {
iframe {
height:140px;
}
附带说明一下，通常最好使用 max-width 而不是 max-device-width。前者会将您的小样式应用于小型笔记本电脑或桌面浏览器窗口；后者不会。
关于html - 通过媒体查询设置 iframe 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40099299/