使用@media显示图像

Question

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

我使用＆＃34;显示：url（＆＃39; xxxx＆＃39;），但似乎没有用。

Answer 1

您必须在HTML上添加两个徽标，如下所示：

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

然后，您必须默认隐藏移动徽标：

.mobile-logo {
    display: none;
}

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

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

    .mobile-logo {
        display: block;
    }
}

Answer 2

您要做的是创建一个元素并在其上设置背景。您将使用@media控件根据窗口的大小确定背景图像。

@media only screen and (min-width: 768px) {
  .logo {
    background: url('image.jpg');
  }
}

@media only screen and (max-width: 767px) {
  .logo {
    background: url('imagesmall.jpg');
  }
}

这就是你的元素的样子。

<div class="logo"></div>

Answer 3

使用类创建标记，然后使用mediascreen将新样式应用于所述类

创建一个div标签

CSS /

@media screen .... etc {
    .image {background-image: url('wwww....');
}

因此，当在屏幕上到达确切像素时，它会将背景图像应用于我在上面创建的图像类。