Question

我试图让@media搜索工作，但没有成功。我使用以下代码，但我可以显示的唯一图像是headernew.jpg，而不是headerold.jpg所以它接缝，没有任何媒体查询正在工作。我在27英寸的iMac和iPad上进行了测试，但都显示了相同的背景图像。任何帮助将不胜感激。

感谢罗杰

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;

Answer 1

你的格式错了，我的代码中没有看到任何选择器，它应该是这样的：

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

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

媒体搜索iPad

1 个答案: