CSS 不适用于小屏幕手机答案

【问题标题】：CSS not applied to small screen size mobileCSS 不适用于小屏幕手机
【发布时间】：2014-01-10 17:33:31
【问题描述】：

根据屏幕尺寸显示不同的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; 
    }
}

【问题讨论】：

尝试将<meta name="viewport" content="initial-scale:1.0" /> 添加到您的<head>。
在此处添加javascript并更好地使用max-width，因为在max-device-width中您必须添加device-pixel-ratio

标签： css

【解决方案1】：

为什么会这样？

因为默认情况下 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！

demo : 我用min-width 展示demo，用min-device-width 做你的css

demo of what you are doing

solution 1（交换查询）

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

【讨论】：

【解决方案2】：

改变这个：-

@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; 
    }
}

【讨论】：

【解决方案3】：

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

@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 。绝对没有理由让他们在那里

【讨论】：

【解决方案4】：

倒转最后 2 个媒体的顺序

【讨论】：