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

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 宽度并用百分比替换它们。