【问题标题】：Using @media to display an image使用@media 显示图像
【发布时间】：2015-06-29 18:23:38
【问题描述】：

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

我已经使用 "display:url('xxxx') 绑定了，但这似乎不起作用。

【问题讨论】：

display: url('xxx') 在 CSS 中不是一个东西。有background: url('xxxx')这样的东西。

标签： html css wordpress twitter-bootstrap

【解决方案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;
    }
}

【讨论】：

这样的远不止在 div 上设置背景图片
设置背景不起作用，但这很有效！太感谢了！ :)
解释我的反对意见。此技术将强制浏览器下载两个图像。背景图像技术只会导致一次下载。

【解决方案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>

【讨论】：

【解决方案3】：

用一个类创建一个标签，然后使用 mediascreen 将新样式应用到该类

创建一个div标签

css/

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

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

【讨论】：