1

I am trying to get the @media search to work but with not success. I am using the following code but the only image I can displayed is the headernew.jpg never the headerold.jpg so it seams that none of the media queries are working. I have tested on a 27in iMac and a iPad but both display the same background image. Any help would be appreciated.

Thanks Roger

position: absolute;
top: 0;
left:-50%;
width: 1344px;
height: 150px;
background-image: url('../img/headernew.jpg');
/* Only affects 1600px width */
    @media only screen and (min-width : 1600px){ background-image: url('../img/headerold.jpg');}
    /* Only affects 1200px width */
@media only screen and (max-width : 1200px){ background-image: url('../img/headerold.jpg');}
    /* Only affects 900px width */
    @media only screen and (max-width : 900px){ background-image: url('../img/headerold.jpg');}
    /* Only affects 600px width */
    @media only screen and (max-width: 600px){ background-image: url('../img/headerold.jpg');}
    /* Only affects 400px width */
    @media only screen and (max-width: 400px){ background-image: url('../img/headerold.jpg');}
background-repeat: no-repeat;
background-position: center center;
4

1 回答 1

3

您的格式错误，我在您的代码中看不到任何选择器，应该如下所示：

#yourID {
    background-image: url('../img/headernew.jpg');
}
@media only screen and (max-width : 900px) {
    #yourID {
        background-image: url('../img/headerold.jpg');
    }
}

看起来您试图将媒体查询放在选择器块中，但查询必须包装您要使用的选择器和规则。

于 2013-09-05T16:08:30.330 回答