Question

我需要在移动设备上使用与本网站桌面不同的徽标：BidirectionalIterator

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

由于其他一些原因，我制作了一个儿童主题，但我从未通过儿童主题编辑HTML，并且想知道是否有人知道这里有什么文件。

我正在看这个问题https://www.lovelilbucks.com/并且可能会尝试第一个答案（似乎是合法的），但对于我在儿童主题中编辑的文件感到紧张。我相信这是我需要编辑的HTML（如果你使用inspect）

<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的{{1}}标记，以便您可以设置浏览器应下载的断点并显示一个图像或另一个

picture

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

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

Answer 2

对于符合html5标准的浏览器，@ FacundoCorradini的方法是正确的。对于较旧的浏览器支持，您可能需要使用精灵方法：

.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;
  }
}

<div class="logo"></div>

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

2 个答案: