2

我在我的 CSS 文档中添加了一个 @media 屏幕。我认为我会直接复制粘贴第一个屏幕尺寸的 CSS，并调整元素以使其在较小的屏幕上调整。我这样做并改变了一个元素，h1。当我去查看我的站点时，h1 是样式表中唯一出现的项目。我复制的其他项目都不能在小尺寸屏幕上工作。为什么？如果所有项目都不起作用，我会认为@media screen 和 (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%;
}

}
4

1 回答 1

4

尝试使用限定词“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.

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

于 2013-10-20T15:12:59.720 回答