Question

我在这里遇到一个问题，我不知道如何解决它。

我有一个标题＆＃34; topo＆＃34;带图像。

我想在我的桌面和平板电脑版本中使用该图像，但在我的媒体查询中使用480px的智能手机时，我想显示其他图像，图像较小。

因此，在我的480px媒体查询中，我尝试使用CSS提供背景图像并将我的#logo图像设为display:none，因此我可以将较小的图像用于智能手机。

但它不起作用，有人可以给我一些帮助吗？

这是我对此问题的html：

<header id="topo">
    <span id="logo">
        <a href="index.php"><img src="../images/logo.png" /></a>
    </span>
</header>

我有移动设备的媒体查询

@media screen and (max-width:480px) 
{

*
{
    margin:0;
    padding:0;
    border:0;
    outline:none;
}

body
{
    min-width:320px;
}

#topo
{
    width:226px;
    margin:10px auto 0 auto;
    background:url(../imagens/logo%20-%20C%C3%B3pia.png);   
}

.....
}

这是我对平板电脑的媒体查询：

@media screen and (min-width:481px) and (max-width:768px) 
{

*
{
    margin:0;
    padding:0;
    border:0;
    outline:none;
}

#topo
{
    width:700px;
    margin:10px auto 0 auto;
    background:yellow;  
}

#logo
{
    float:left;

}

....

}

Answer 1

在这种情况下，当您在display:none元素上设置img时，a元素会自行折叠，因为img元素是a元素唯一的孩子。因此，不显示背景图像，因为a元素的高度为0。要解决此问题，您应在a元素上设置高度，并将元素的display从inline更改为block。

Example Here

@media screen and (max-width:480px) {
    #topo {
        width:226px;
        margin:10px auto 0 auto;
        background:url('//placehold.it/200/0ff');
    }
    #topo a {
        height:200px;
        display:block;
    }
    #topo img {
        display:none;
    }
}

上述解决方案可能适用于大多数场景，但是，如果你想避免在元素上设置高度，我建议你做一些这样的事情：

Example Here

将两个img元素添加到标记中，为每个互斥的类提供。

<a href="index.php">
    <img class="hidden_mobile" src="//placehold.it/200/000" />
    <img class="hidden_desktop" src="//placehold.it/200/f00" />
</a>

沿着这些线使用某些内容并根据屏幕大小隐藏相应的图像。这种方法的好处是您可以将这些类重用于其他方案。此外，您可以避免在a元素上设置高度。

@media screen and (min-width:481px) {
    .hidden_desktop {
        display:none;
    }
}
@media screen and (max-width:480px) {
    .hidden_mobile {
        display:none;
    }
}

Answer 2

这里有正确的@media查询来执行此操作。

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

尝试根据两个媒体查询显示两个不同的图像

2 个答案: