CSS不适用于小屏幕尺寸的移动设备

Question

根据屏幕尺寸显示不同的logo，不知道为什么320尺寸的手机(索尼爱立信WT19i)无法执行正确的样式表。

我使用 javascript window.innerWidth 和 window.innerHeight 检查屏幕宽度，即 320x401。它加载 800 像素的 CSS。

@media screen {
body  {
        background-image:url('desktop.png') !important;
        background-repeat:no-repeat !important;
        background-attachment:fixed !important;
        background-position:right bottom !important; 
    }
}

@media screen and (max-device-width: 320px) {
    body  {
        background-image:url('320P.png') !important;
        background-repeat:no-repeat !important;
        background-attachment:fixed !important;
        background-position:right bottom !important; 
    }
}

@media screen and (max-device-width: 800px) {
    body {
        background-image:url('800P.png') !important;
        background-repeat:no-repeat !important;
        background-attachment:fixed !important;
        background-position:right bottom !important; 
    }
}

Answer 1

为什么会这样？？

因为默认情况下，css 采用其样式中适用于任何标签的最后规则....所以:

@media screen and (max-device-width: 320px) 和

@media screen and (max-device-width: 800px)
它们都适用于 320px 的宽度...但是由于您稍后提到了 max-device-width: 800px，浏览器会忽略 max-device-width: 320px 规则，因为它可以被最后一条规则覆盖，因此应用最后一条规则。

解决方案

要么调换顺序，要么使用 min-device-width: 321px 而不是 max-device-width: 800px!

demo : 我使用min-width 来演示，使用min-device-width 作为你的css

demo of what you are doing

solution 1 (交换查询)

solution 2 (使用 min 而不是 ma​​x 以避免覆盖)