html - 最大宽度 :480px CSS rule being ignored

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。

为什么会这样？

我有两部手机。一部电话宽 480px，另一部电话宽 1280px。为什么 img 居中显示在 1280px 的手机上？

Answer 1

找到这个 - http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

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

因此，根据此页面，您的 720 宽度仍然属于 CSS 对 480 的理解。希望这能回答您的问题。

你可以尝试的是 -

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

以上来自https://stackoverflow.com/a/19933195/3652449