最大宽度：480px CSS 规则被忽略答案

【问题标题】：max-width:480px CSS rule being ignored最大宽度：480px CSS 规则被忽略
【发布时间】：2014-05-20 13:44:08
【问题描述】：

我在媒体查询方面遇到了一些问题。他们只是不工作。我现在有一个非常空白的网站 - 它只是一个页面，里面有一个 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 像素。为什么不应该在 1280px 手机上的 img 居中？

【问题讨论】：

你一开始有没有试过让一个 div 居中？创建一个 div，给出一个 id 并用给出“宽度”编写 css 规则。如果你想让一个元素居中，你必须给它一个宽度！
你误解了我的问题。图像居中。但它在不应该的时候居中！
对不起。那么，您是否曾经尝试过将桌面宽度调整为 480 或更大以获得结果？当我遇到问题时，我会像这样进行测试并真正帮助...
@R.CanserYanbakan 抱歉，我忘了说，我在台式机上试过了——效果很好。它停留在左边，然后当我调整到 480 像素或更少时，它就会居中。
实际的屏幕像素宽度并不一定能告诉您手机响应什么。例如，iPhone 比 320 像素宽得多，但它们仍然表现得像 320 像素宽一样。根据this 的说法，Galaxy S3s 可以认为它们有 360 像素那么宽。

标签： html css

【解决方案1】：

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

因此，根据此页面，您的 720 宽度仍然在 CSS 对 480 的理解范围内。希望能回答您的问题。

你可以尝试的是 -

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

【讨论】：