Question

我遇到了媒体查询的一些问题。他们只是不工作。我现在有一个非常空白的网站 - 它只是一个页面，里面有一个img。

此问题与 this 有关，但并非重复。

在我之前的问题中，当max-width为480px时，我无法将图片置于页面的中心位置。

我正在使用的代码：

@media (max-width: 480px)
{
    img
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

现在，我已经设法解决了 - 部分 - 通过添加：

<meta name="viewport" content="width=device-width" />

到文件的头部。但现在，在宽度为1280px的不同手机上，img仍然居中！即使我的CSS中的 only 样式专门说max-width:480px。

为什么会这样？

我有两部手机。一部手机宽480像素，另一部手机宽1280像素。为什么img以1280px手机为中心不应该？

Answer 1

显然，设备分辨率会影响其css宽度。我认为css本身的平均像素宽度可能与高分辨率设备相对应，也可能不对应。

所以，根据这个页面，你的720宽度仍属于CSS＆＃39;理解480.希望能回答你的问题。

你可以尝试的是 -

<meta name="viewport" content="width=device-width, initial-scale=1.0">