Question

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

使用Wordpress，创世体框架和儿童主题。

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（min-width：480px）和（max-width：768px）{ .site-title a { background：transparent url（“http://caspercreations.ie/awning1logotablet.png”）no-repeat scroll 0 0！important; 显示：块; } }

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

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

}

Answer 2

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

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

如果您的徽标是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');
  }
}

如何在移动视图wordpress上有不同的徽标

3 个答案: