max-width：480px CSS規則被忽略

Question

我在媒體查詢方面遇到了一些問題。 他們只是不工作。 我現在有一個非常空白的網站 - 它只是一個頁面，里面有一個img。

這個問題涉及到這一個，而不是重復。

在我之前的問題中，當max-width為480px時，我無法將圖像置於頁面的中心480px 。

我正在使用的代碼：

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

現在，我已經設法解決了 - 部分 - 通過添加：

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

到文件的頭部。 但現在，在另一款寬度為1280px 手機上，img仍然居中！ 即使我的CSS中唯一的樣式特別說明max-width:480px 。

為什么會這樣？

我有兩部手機。 一部手機寬480像素，另一部手機寬1280像素。 為什么img以1280px手機為中心？

Answer 1

顯然，設備分辨率會影響其css寬度。 我認為css本身的平均像素寬度可能與也可能不與高分辨率設備相對應。

所以，根據這個頁面，你的720寬度仍然屬於CSS對480的理解。希望能回答你的問題。

你可以嘗試的是 -

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