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

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

您可以将两个图像放在<a>元素中，并使用CSS媒体查询显示/隐藏。例如...

HTML：

<div id="mainlogo">
  <a class="main logo" href="http://sheisbiddy.com/home/" title="Main Logo" alt="main logo">
    <img class="hidden-mobile" src="[source for desktop logo]" border="0" alt="" />
    <img class="hidden-desktop" src="[source for mobile logo]" border="0" alt="" />
  </a>
</div>

CSS：

@media all and (min-width: 768px) {
  .hidden-desktop {
    display: none !important;
  }
}

@media all and (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }
}

如果这是一个你正在从头开始工作的项目，请考虑使用像Bootstrap这样的前端框架 - 有很多很棒的实用程序类来处理响应功能。

Answer 3

如果您只想使用CSS，可以使用CSS媒体查询来完成：

标记

<div id="mainlogo">
    <a class="main logo" href="">
        <div class="logoImage"></div>
    </a>
</div>

CSS（mobile fisrt）

.logoImage{
    background-image: url( 'path/to/mobile/version/of/image.jpg' );
}

@media screen and (min-width:401px){
    .logoImage{
        background-image: url( 'path/to/desktop/version/of/image.jpg' );
    }
}

Answer 4

如果您使用的是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/