css@media screen无法完全工作

css@media screen无法完全工作,css,Css,我在CSS文档中添加了一个@media屏幕。我想我会直接复制粘贴CSS作为第一个屏幕大小,并根据我希望它们在较小屏幕上的调整方式调整元素。我这样做了,并改变了一个元素,h1。当我去查看我的站点时,h1是样式表中唯一显示的项目。我复制的其他项目在小屏幕上都不起作用。为什么?如果这些项目都不起作用,我会认为@media屏幕和(max-width:599px)代码行是错误的,但它有四分之一的时间起作用,所以我在这里真的不知所措。为什么CSS的其余部分不起作用?多谢各位 @media screen an

我在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%;
}

}
尝试使用限定符“only”

这里引用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.
参考本文:

尝试使用限定词“only”

这里引用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.

参考这篇文章:

Wow。成功了。非常感谢。有什么解释让我能理解吗?或者这是我应该知道并记住的基本信息,就像p是段落一样?很高兴听到。如果这是一个足够的解决方案,你介意将这个答案向上投票,并选中向上/向下投票下面的复选框吗?我试过了,但显然我在这个网站上还没有足够的时间向上投票。哇。成功了。非常感谢。有什么解释让我能理解吗?或者这是我应该知道并记住的基本信息,就像p是段落一样?很高兴听到。如果这是一个足够的解决方案,你介意将这个答案向上投票,并选中向上/向下投票下的复选框吗?我尝试过,但显然我还没有在这个网站上足够多的时间来向上投票。检查(除其他外)“最小宽度:600px”条件是否与“最大宽度:599px”相反。。。可能行为不是预期的“IF..ELSE..”。检查(除其他事项外)“最小宽度:600px”是否与“最大宽度:599px”相反。。。也许这种行为不是预期的“如果……否则……”。