CSS媒体查询不起作用

Question

我有meda查询的问题。我有以下代码：

    @media only screen
and (min-device-width : 0px)
and (max-device-width : 480px) {
    #header {
        background-color: pink;
    }
}

@media only screen
and (min-device-width : 481px)
and (max-device-width : 768px) {
    #header {
        background-color: blue;
    }
}

@media only screen
and (min-device-width : 769px)
and (max-device-width : 960px) {
    #header {
        background-color: green;
    }
}

@media only screen
and (min-device-width : 960px){
    #header {
        background-color: yellow;
    }
}

和两部智能手机

首先：三星Galaxy SI i9000 - 480 x 800 - 显示颜色绿色.... 第二名：iPhone 5 - 640 x 1136 - 显示COLOR PINK

我不明白。

谢谢Tomas

Answer 1

设备宽度和设备高度表示不是物理像素的逻辑像素。因此，即使视网膜显示器具有640个物理像素，iPhone 5仍然具有320px的设备宽度;其余部分用像素密度消耗。因此，iPhone完全可以呈现粉红色。

但是，银河系没有。它的像素密度为1。

听起来你还没有设置ViewPort。