我正在尝试将此嵌入加载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>
这是行不通的
它不起作用，因为内联样式（height="200"在iframe上）优先于任何其他样式。另外，您的选择器将与您的标记不匹配-应该是iframe（元素）而不是.iframe（类）。
尝试将height=200iframe取下，然后以您的样式将其放在媒体查询之前：
iframe {
height: 200px;
}
@media only screen and (max-device-width: 480px) {
iframe {
height:140px;
}
}
另外，通常最好使用max-width代替max-device-width。前者会将您的小样式应用于小型笔记本电脑或台式机浏览器窗口；后者不会。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句