在移动设备和台式机上显示不同的徽标？答案

【问题标题】：Display a different logo on mobile and desktop?在移动设备和台式机上显示不同的徽标？
【发布时间】：2020-06-01 00:39:23
【问题描述】：

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

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

欣赏它，伙计们！

【问题讨论】：

标签： html css mobile

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

【讨论】：

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

【讨论】：

【解决方案3】：

您可以将两个图像放在<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 这样的前端框架 - 有很多很棒的实用程序类可以处理响应式功能。

【讨论】：

这不是一个好方法，因为两个图像都被加载，共享带宽并影响页面加载时间。

【解决方案4】：

如果你只想使用 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' );
    }
}

【讨论】：

【解决方案5】：

如果你使用的是引导程序，有一个我用过的简单快速的方法，使用 2 个标签，使用 "d-none d-sm-block" 类在移动设备中隐藏第一个图像并使用 "d-block d-sm-none" 类在桌面中隐藏第二张图像检查下面的代码：

<div>
<img  src="img5.jpg"  class="d-none d-sm-block"  />

<img src="img5-mobile.jpg"  class=" d-block d-sm-none" />
</div>

【讨论】：