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

我需要手机上的徽标与桌面上的徽标不同，以用于此网站：

我使用Uncode Theme/VisualComposer创建了Wordpress站点，因此实际上您只需在主题选项中输入徽标，而不是自己编写

我之所以创建子主题还有其他一些原因，但我从未通过子主题编辑过HTML，我想问问是否有人知道这里的文件是什么

我在看这个问题，可能会尝试第一个答案似乎是合法的，但对于我在儿童主题中编辑的文件感到紧张。我相信如果你使用inspect，这就是我需要编辑的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，或者两者兼而有之

谢谢

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

<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

---

阅读响应图像：

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

.标志{ 背景：urlhttps://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be 不重复滚动0 0透明； 宽度：190px； 高度：50px； } @介质最大宽度：650px{ .标志{ 背景位置：0-500px； 宽度：150px； 高度：30px； } } @介质最大宽度：400px{ .标志{ 宽度：28px； } }

---

我建议使用“最大宽度”，并将默认徽标设置为桌面版本，因为IE无法识别图片，只能显示小徽标。或者-使用插件使IE像一个合适的浏览器一样工作。@RichardParnaby King yup，你说得对。我会编辑我的response@FacundoCorradini感谢您周到的回复和编辑。晚上我会试试这个，如果有用的话会告诉你们的！好的替代方法。但是在picture-tag方法中，那些不支持picture-srcset的浏览器将简单地显示img，这就是为什么它首先存在的原因。这几乎意味着IE将显示img，而其他人将相应地适应图片集，不是吗？也许迷你歌剧院是个问题？不想争论，只是澄清一下