如何在移动查看 wordpress 上有不同的徽标

Question

当在手机或平板电脑上查看我的网站并隐藏桌面浏览器上使用的徽标时，如何将我的徽标更改为另一个较小的图像？

使用 Wordpress、Genesis 框架和子主题。

http://www.caspercreations.ie

Answer 1

这是解决我原来问题的代码：

@media (max-width: 480px) {
.site-title a {
    background: transparent url("http://caspercreations.ie/awning1logomobile.png") no-repeat scroll 0 0 !important;
    overflow: auto;
}

}

}

@media（最小宽度：480px）和（最大宽度：768px）{ .site-title 一个 { 背景：透明 url("http://caspercreations.ie/awning1logotablet.png") 不重复滚动 0 0 !important; 显示：块； } }

以下是徽标和主要内容之间的差距是如何修复的：

.header-full-width.header-image .site-title a {
background-position: center bottom !important;

}

Answer 2

1. 如果您的徽标是背景图片，则使用以下 CSS：

   @media (max-width: 480px){
       .logo a { background: url('path-to-mobile-logo') no-repeat 0 0; }
   }
   

2. 如果您的徽标是img 标签，则使用以下结构：

HTML：

<a class="logo">
    <img src="desktop-logo" alt="" class="logo-img logo-img-desktop">
    <img src="tablet-logo" alt="" class="logo-img logo-img-tablet">
    <img src="mobile-logo" alt="" class="logo-img logo-img-mobile">
</a>

CSS：

.logo-img { display: none; }

@media (min-width: 1025px){
    .logo-img-desktop { display: block; }
}

@media (min-width: 768px) and (max-width: 1024px){
    .logo-img-tablet { display: block; }
}

@media (min-width: 320px) and (max-width: 480px){
    .logo-img-mobile { display: block; }
}

Answer 3

你必须使用这个精确的选择器：

@media (max-width: 768px) {
  .header-image .site-title > a {
     background-image: url('images/your-mobile-logo.png');
  }
}