html - 使用子主题在移动设备上显示与桌面不同的 Logo

Question

对于此网站，我需要在移动设备上使用与桌面设备不同的 Logo :https://www.lovelilbucks.com/

我使用 Uncode Theme/Visual Composer 制作了 Wordpress 网站，因此您实际上只需在主题选项中输入 Logo ，而不是自己编写代码。

由于其他一些原因，我制作了一个子主题，但我从未通过子主题编辑过 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，还是两者兼而有之？

谢谢

Answer 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