在手机和桌面上显示不同的徽标？

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;}

欣赏它们!

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>

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/