0

我在移动设备上需要一个不同于我在桌面上为这个网站做的标志：https ://www.lovelilbucks.com/

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

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

我在看这个问题在移动设备和台式机上显示不同的徽标？并且可能会尝试第一个答案（似乎合法），但对我在子主题中编辑的文件感到紧张。我相信这是我需要编辑的 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，还是两者兼而有之？

谢谢

4

2 回答 2

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

于 2018-01-23T15:44:43.800 回答
0

对于 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;
  }
}
<div class="logo"></div>

于 2018-01-23T16:11:42.213 回答