使用子主题在移动设备上显示与桌面不同的徽标答案

【问题标题】：Display different logo on mobile than desktop using a child theme使用子主题在移动设备上显示与桌面不同的徽标
【发布时间】：2018-07-02 11:53:37
【问题描述】：

我需要在移动设备上使用与桌面上不同的徽标来创建此网站：https://www.lovelilbucks.com/

我使用 Uncode Theme/Visual Composer 创建了 Wordpress 网站，因此您实际上只需在 Theme Options 中输入徽标，而不是自己编写代码。

出于其他一些原因，我制作了一个子主题，但我从未通过子主题编辑 HTML，并想问是否有人知道这里的文件。

我在看这个问题Display a different logo on mobile and desktop? 并且可能会尝试第一个答案（似乎是合法的）但对我在子主题中编辑的文件感到紧张。我相信这是我需要编辑的 HTML（如果您使用检查）

<div class="logo-image logo-skinnable" data-maxheight="180" style="height: 180px;"><img src="https://www.lovelilbucks.com/wp-content/uploads/2017/11/lil-bucks-website-logo-uai-258x180.png" alt="logo" width="258" height="180" class="img-responsive"></div>

有知道要编辑什么的经验吗？这主要是基于 css 或 html，还是两者兼而有之？

谢谢

【问题讨论】：

标签： html css wordpress media-queries child-theming

【解决方案1】：

将您的img 标记替换为picture 标记，这样您就可以设置浏览器应该下载并显示一张或另一张图像的断点

<picture>
  <source media="(min-width: 650px)" srcset="big-logo.jpg">
  <source media="(min-width: 465px)" srcset="not-so-big-logo.jpg">
  <img src="default-logo" alt="logo" style="width:auto;">
</picture>

或者，您可以在图像标签上使用 srset。

了解响应式图片：https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

【讨论】：

我建议使用 max-width 并将默认 logo 设置为桌面版本，因为 IE 无法识别picture，只会显示小 logo。
或者 - 使用插件让 IE 表现得像一个正常的浏览器。
@RichardParnaby-King 是的，你是对的。我将编辑我的回复
@FacundoCorradini 感谢您的周到回复 + 编辑。我会在晚上试试这个，如果成功了会告诉你们的！

【解决方案2】：

对于兼容 html5 的浏览器，@FacundoCorradini 的方法是正确的。对于较旧的浏览器支持，您可能需要使用 sprite 方法：

.logo {
 background: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be) no-repeat scroll 0 0 transparent;
 width: 190px;
 height:50px;
}
@media (max-width: 650px) {
  .logo {
    background-position: 0 -500px;
    width: 150px;
    height: 30px;
  }
}
@media (max-width: 400px) {
  .logo {
    width: 28px;
  }
}

&lt;div class="logo"&gt;&lt;/div&gt;

【讨论】：

很好的替代方法。但是在图片标签方法上，那些不支持图片srcsets的浏览器会简单地显示img，这就是它首先存在的原因。这几乎意味着 IE 将显示 img 而其他将相应地适应图片 srcset，不是吗？也许 Opera Mini 是个问题？（不想争论，只是澄清）