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

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类隐藏XSD和可见XSD（XSD =超小型器件电话），您可以创建这些类或使用做到这一点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} 
}