Question

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

我使用javascript window.innerWidth和window.innerHeight检查屏幕宽度，即320x401。它加载了800px的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

更改： -

@media only screen 
and (min-device-width : 321px) 
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 2

重新排列媒体查询的顺序。您希望较小的屏幕覆盖较大的屏幕，因此必须在以下情况下定义：

@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: 800px) {
    body {
        background-image:url('800P.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; 
    }
}

此外，删除所有!important。绝对没有理由让他们在那里

Answer 3

为什么会这样？

因为css默认采用其样式中应用的最后一个规则....所以：

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

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

<强>解决方案

交换订单或使用min-device-width: 321px代替max-device-width: 800px！

演示：我使用min-width来展示演示，使用min-device-width为您的css

demo of what you are doing

solution 1（交换查询）

solution 2（使用 min 而不是 max 以避免覆盖）

Answer 4

颠倒最后2个媒体的顺序

CSS不适用于小屏幕尺寸的手机

4 个答案: