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

尝试使用限定符“仅”

@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?

css @media屏幕不能完全正常工作

1 个答案: