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.

引用这篇文章:What is the difference between "screen" and "only screen" in media queries?