Question

我为小型企业建立了一个网站，但定制的股票期权限制限制了项目的完成。我需要添加仅在移动网站中显示的第二个徽标。我在SquareSpace答案网站上看到了一些答案，但到目前为止它们都没有。有没有人有过这个领域的经验，如果有的话，用CSS编辑器怎么做呢？

Answer 1

首先使用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;
   }
}

当然，将徽标规则的定位和大小更改为适合您的情况。

Answer 2

你可以通过创建两个CSS类hidden-xsd和visible-xsd（xsd = Extra small devices Phones）来实现这一点，你可以创建这些类或使用OK-grids

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

CSS类

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

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

2 个答案: