在移动设备和桌面设备上显示不同的徽标？

Question

我想在手机上更改标题上的徽标。这是显示在桌面和移动设备上的当前标题中的代码（在桌面上它是返回主屏幕的链接）。有什么简单的方法可以仅在移动版本上更改它吗？

HTML:

 <div id="mainlogo">
<a class="main logo" href="http://sheisbiddy.com/home/" title="Main Logo" alt="main logo">
<img src="http://sheisbiddy.com/wp-content/uploads/2016/01/SHEISBIDDY-main-logo-smaller-6.png" border="0" alt="" />
</a>

CSS：

 #mainlogo {text-align:center;}

欣赏它伙计们！

原文由 Ionamaroq 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用媒体查询并有选择地显示/隐藏元素。您的 html 将在标记中包含两个徽标，并且您的 CSS 将根据屏幕尺寸定义显示哪个徽标。

例如：

 <style>
  /* hide mobile version by default */
  .logo .mobile {
    display: none;
  }
  /* when screen is less than 600px wide
     show mobile version and hide desktop */
  @media (max-width: 600px) {
    .logo .mobile {
      display: block;
    }
    .logo .desktop {
      display: none;
    }
  }
</style>

<div class="logo">
  <img src="/images/logo_desktop.png" class="desktop" />
  <img src="/images/logo_mobile.png" class="mobile />
</div>

原文由 umang 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您使用的是 Bootstrap，那么我有一个非常简单的解决方案，只需使用几个 Bootstrap 类：

 <div id="mainlogo">
 <img src="/images/logo_desktop.png" class="d-none d-lg-block" />
 <img src="/images/logo_mobile.png" class="d-lg-none" />
</div>

您可以在此处查看详细信息： https ://getbootstrap.com/docs/4.0/utilities/display/

原文由 ikonuk 发布，翻译遵循 CC BY-SA 4.0 许可协议