CSS媒体查询不起作用[重复]

Posted 2023-03-06

【中文标题】CSS媒体查询不起作用[重复]

【英文标题】：CSS Media Queries doesn't work [duplicate]

【发布时间】：2013-12-21 07:44:03

【问题描述】：

我对 meda 查询有疑问。我有以下 css 代码：

    @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

我不明白。

谢谢托马斯

【参考方案1】：

设备宽度和设备高度代表逻辑像素而不是物理像素。因此，即使视网膜显示屏有 640 个物理像素，iPhone 5 的设备宽度仍为 320 像素；其余的被像素密度消耗。因此，iPhone 呈现粉红色是完全合理的。

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

听起来你还没有设置你的ViewPort。