Question

很难让CSS在不同的设备上运行。我有台式机，iPad 4和索尼S8。使用以下CSS媒体查询：

@media screen and (min-width: 1200px){
    body{
        background: red;
    }
}
@media screen and (min-width: 768px) and (max-width: 979px){
    body{
        background: green;
    }
}
@media screen and (max-width: 767px){
    body{
        background: purple;
    }   
}
@media screen and (max-width: 480px){
    body{
        background: tomato;
    }   
}

如果来自许多不同的互联网资源和文章的示例，我已经诚实地测试了许多变体，但仍无法使其正常工作。通过上面的配置，我的桌面有一个红色的浏览器背景 - 索尼和iPad都有白色。有人可以给我一些方向吗？谢谢。

更新：改变我的CSS看起来像这样：

/* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
@media screen and (min-width:320px) {
    body{
        background: tomato;
    }
}
/* smartphones, Android phones, landscape iPhone */
@media screen and (min-width:480px)  {
    body{
        background: red;
    }
}
/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
@media screen and (min-width:600px)  {
    body{
        background: blue;
    }
}
/* tablet, landscape iPad, lo-res laptops ands desktops */
@media screen and (min-width:801px)  {
    body{
        background: yellow;
    }
}
/* big landscape tablets, laptops, and desktops */ 
@media screen and (min-width:1025px)  {
    body{
        background: green;
    }
}
/* hi-res laptops and desktops */
@media screen and (min-width:1281px)  {
    body{
        background: purple;
    }
}

桌面现在是紫色，iPad现在是黄色，而S8是黄色的

Answer 1

此代码适用于我。你必须有一些重叠的东西。

            /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
        @media screen and (min-width:320px) {
            body{
                background: tomato;
            }
        }
        /* smartphones, Android phones, landscape iPhone */
        @media screen and (min-width:480px)  {
            body{
                background: red;
            }
        }
        /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
        @media screen and (min-width:600px)  {
            body{
                background: blue;
            }
        }
        /* tablet, landscape iPad, lo-res laptops ands desktops */
        @media screen and (min-width:801px)  {
            body{
                background: yellow;
            }
        }
        /* big landscape tablets, laptops, and desktops */ 
        @media screen and (min-width:1025px)  {
            body{
                background: green;
            }
        }
        /* hi-res laptops and desktops */
        @media screen and (min-width:1281px)  {
            body{
                background: purple;
            }
        }

响应式CSS不能在不同设备上运行

1 个答案: