browser - @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并添加width: 100%到img通过 CSS。最后，删除 CSS 中的任何 px 宽度并用百分比替换它们。