如何使用自定义CSS为移动设备添加不同的徽标？

我已经为一家小企业建立了一个网站，但是定制股票期权的限制限制了项目的完成。我需要添加第二个标志，只显示在移动网站。我在SquareSpace answers网站上看到了一些答案，但迄今为止没有一个有效。是否有人有此方面的经验，如果有，如何使用CSS编辑器完成此操作？

首先使用CSS中的规则设置移动徽标图像：

.logo {
    background: transparent url(../img/mobile-logo.png) center no-repeat;
}

然后您需要一个媒体查询：

@media (min-width: 768px) {
   .logo {
      background: transparent url(../img/logo.png) center no-repeat;
   }
}

---

当然，将徽标规则的位置和大小更改为对您的情况有意义的大小。

您可以通过创建两个CSS类隐藏xsd和可见xsd（xsd=超小型设备电话）来实现这一点，您可以创建这些类或使用

---

只是CSS？使用媒体查询和伪元素以特定分辨率显示特定图像。请参阅此演示：

<div class="logo">
 <h1>
   <a class="hidden-xsd" href="#" title=""><img src="des_logo.png" alt="" title=""></a>
   <a class="visible-xsd" href="#" title=""><img src="mob_logo.png" alt="" title=""></a>
 </h1>
</div>

@media only screen and (max-width:768px) {
.hidden-xsd{display:none!important}
.visible-xsd{display:block!important}
}