通过响应式 css 更改我的手机徽标图像答案

【问题标题】：Changing my logo image for mobiles via responsive css通过响应式 css 更改我的手机徽标图像
【发布时间】：2016-01-14 14:11:27
【问题描述】：

我想仅使用 CSS 向我的移动用户显示不同的图像，因为我无法访问 html 代码。

在移动设备上，我将 display:none 添加到 header-logo-image img { 然后将 background-url 添加到成功显示我的替代徽标的 div 中。唯一的问题是当我切换到 div 中的背景图像时，我失去了指向其他 img 提供的主页的链接。

有什么办法可以让我可以链接背景图片吗？这是 CSS 图像精灵可以进来但在 img 上使用它们的地方吗？

<div id="header-logo-image">
<a href="http://example.com/folder/">
<img src="http://example.com/folder/wp-content/uploads/2016/01/head-logo.png">

【问题讨论】：

标签： css

【解决方案1】：

在移动设备上切换徽标是一个选项：

HTML

<a class="navbar-brand" href="/"></a>

CSS

.navbar-brand {
    background: url(PATH_TO_IMG/logo.png);
    width:220px;
    height:65px;
    margin-left:5px;
}
@media only screen and (max-width:800px) {
    .navbar-brand {
        background: url(PATH_TO_IMG}/logo_small.png) no-repeat center;
        width:70px;
    }
}

Example

希望这会有所帮助！

【讨论】：

我的手机在纵向模式下显然不再是手机了：-D
这样做，您可以编辑媒体查询以捕获此@JanDvorak 或仅编辑max-width
如果我无法访问 html/code，那么 href url 链接怎么办？
@pnumbers href 链接呢？它会像往常一样工作

【解决方案2】：

我最终使用了这个：

@media only screen and (max-width:800px) {
.navbar-brand img { opacity: 0; }
.navbar-brand {
    background: url(PATH_TO_IMG}/logo_small.png) no-repeat center;
    width:200px;
}
}

这样我就可以将现有的徽标 CSS 和文件留在那里。

【讨论】：

【解决方案3】：

添加你的CSS

@media only screen and (max-width: 767px) {
  #logo {
    content: url("http://yourwebsite.com/mobile_logo.png");
  }
}

@media only screen and (min-width: 767px) {
  #logo {
    content: url("http://yourwebsite.com/large_logo.png");
  }
}

【讨论】：