为什么第二个媒体查询不适用[重复]

Question

这段代码

@media screen and (max-device-width: 2000px)
{
    body
    {
        margin:0px;
        padding:0;
        background-color: #000;
        color: white;
        font-size: 30px;
    }
    #offer
    {
        padding-right:250px;
        padding-left:250px;
    }
} 
@media screen and (max-device-width: 1000px)
{
    body
    {
        background-color: #fff;
    }
    #offer
    {
        padding-left: 10px;
        padding-right: 10px;
    }
}

总是给出黑色背景，填充也不适用，所以我认为第二个查询根本不起作用，为什么会这样？

Answer 1

应该这样做：

@media screen and (max-width: 2000px)
{
    body
    {
        margin:0px;
        padding:0;
        background-color: #000;
        color: white;
        font-size: 30px;
    }
    #offer
    {
        padding-right:250px;
        padding-left:250px;
    }
} 
@media screen and (max-width: 1000px)
{
    body
    {
        background-color: #fff;
    }
    #offer
    {
        padding-left: 10px;
        padding-right: 10px;
    }
}