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

Question

我遇到了一个问题，但我不知道如何解决它。

我有一个带有图像的标题“topo”。

我希望在我的桌面和平板电脑版本中显示该图像，但在我对 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

。

示例在这里

@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;
    }
}

上述解决方案可能适用于大多数情况，但是，如果您想避免在元素上设置高度，我建议改为执行以下操作：

示例在这里

将两个

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

在现代浏览器中，我们可以使用HTML中的

<picture>

和

<source>

来根据媒体查询显示不同的图像

<picture>
    <source media="(max-width:480px)" srcset="your_picture_for_mobile.jpg">
    <source media="(min-width:481px) and (max-width:768px)" srcset="your_picture_for_tablet.jpg">
    <img src="your_picture_for_default.jpg" alt="picture-description">
</picture>

Answer 3

这里您有正确的@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) { ... }

Answer 4

我们可以使用带有带有 media 和 srcset 属性的 Source 标签的 Picture 标签来更改不同媒体屏幕上的图像。

例如

<picture>

  <source media="(min-width:1024px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4GN5cQqTAnJjrjWYicGxGI12ZlTLx81TQAQ&s">
  <source media="(min-width:480px)" srcset="https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Instagram_colored_svg_1-512.png">
  <img src="https://img.freepik.com/free-vector/instagram-vector-social-media-icon-7-june-2021-bangkok-thailand_53876-136728.jpg" alt="Flowers" style="width:auto;">

</picture>

所有最新浏览器都支持 < picture > 标签