html - 使用@media 显示图像

Question

使用@media 标签，如何显示新图像，例如，我有一个要用于我的主站点的 Logo 和一个用于我的移动站点的移动 Logo ，如何仅在使用@media 的移动网站？

我已经使用 "display:url('xxxx') 进行了绑定(bind)，但这似乎没有用。

Answer 1

您必须在您的 HTML 上放置两个 Logo ，如下所示:

<img src="" class="desktop-logo">
<img src="" class="mobile-logo">

然后，您必须默认隐藏移动 Logo :

.mobile-logo {
    display: none;
}

然后，在您的媒体查询中，您必须隐藏桌面 Logo 并显示移动 Logo :

@media screen and (max-width: 480px) {
    .desktop-logo {
        display: none;
    }

    .mobile-logo {
        display: block;
    }
}