Question

这是我的@media查询：

@media (max-height: 950px) {
#menu_img {
    height: 800px;
    width: 400px;
}
}

查询有效，但仅在刷新页面时才有效。在重新调整浏览器大小时，不会发生更改。我必须重新调整大小，然后刷新页面。它发生在chrome中，并且查询在Firefox或IE中根本不起作用。我对为什么感到困惑。

我也尝试过添加：

@media screen and (max-height: 950px)

以及

@media only screen and (max-height: 950px)

如果您需要查看完整代码，可以在此处查看该网站：http://simonmoonlandings.com。

Answer 1

您需要一个视口标记，即<meta name="viewport" content="width=device-width,initial-scale=1.0">。您还需要删除img上的内嵌宽度，并通过CSS将width: 100%添加到img。最后，删除CSS中的任何px宽度，并用百分比替换它们。

@media查询调整图像大小仅适用于页面刷新

1 个答案: