为什么第二个媒体查询不适用

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