CSS @Media屏幕无法完全正常工作

Question

我在CSS文档中添加了@media屏幕。 我以为我可以直接复制粘贴第一个屏幕尺寸的CSS，并根据我希望它们在较小的屏幕上进行调整的方式来调整元素。 我这样做并更改了一个元素h1。 当我去检查我的网站时，h1是样式表中唯一显示的项目。 我复制的其他项目均无法在小尺寸屏幕上工作。 为什么？ 如果所有项目都不起作用，我认为@media屏幕和（max-width：599px）代码行是错误的，但是它四分之一的时间有效，所以我在这里真的很茫然。 为什么其余的CSS无法正常工作？ 谢谢。

@media screen and (min-width:600px){
    body{
        background-image: url('leavesBackground.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: bottom;
        position:relative;
        margin-left: 0px;
    }

    h1{
        text-align:left;
        font-family:Georgia,"Times New Roman", Serif;
        font-size:3em;
        margin-left: 0px;
    }

    h2{
        margin-left: 0px;
        width:40%;
        height:250px;
        overflow-x:scroll; 
        overflow-y:hidden;
        border-style:solid;
        border-width:1px;
    }

    p{
        text-align:left;
        font-family:Arial,Helvetica, Sans-Serif;
        font-size:.9em;
        margin-left: 10px;
        width:60%;
    }
}






@media screen and (max-width:599px) {
body    {position:relative;
margin-left: 0px;
}

h1  {text-align:left;
font-family:Georgia,"Times New Roman", Serif;
font-size:2em;
margin-left: 0px;
}

h2  {margin-left: 0px;
width:40%;
height:250px;
overflow-x:scroll; 
overflow-y:hidden;
border-style:solid;
border-width:1px;
}

p   {text-align:left;
font-family:Arial,Helvetica, Sans-Serif;
font-size:.9em;
margin-left: 10px;
width:60%;
}

}

Answer 1

尝试使用限定词“ only”

@media only screen and (min-width:600px) {}

@media only screen and (max-width:599px) {}

这是直接来自W3C的引文来解释这一点。

The keyword ‘only’ can also be used to hide style sheets from older user agents. 
User agents must process media queries starting with ‘only’ as if the ‘only’ 
keyword was not present.

参考这篇文章： 媒体查询中的“屏幕”和“仅屏幕”有什么区别？