Question

在网站的移动版中，如何更改徽标？我试过减少移动版徽标的图像尺寸。但我需要改变徽标本身。任何人都可以帮忙解决它吗？我正在使用媒体查询为bootstrap中的移动版本设置自定义样式

Answer 1

Bootstrap至v3

您可以使用visible-xs和hidden-xs类来显示不同的徽标，具体取决于设备。

<img class="visible-xs" src="mobile-logo.jpg"> <!-- this one will be visible on mobile -->
<img class="hidden-xs" src="normal-logo.jpg"> <!-- this one will be visible on everything else -->

Bootstrap 4

<img class="d-xs-none" src="mobile-logo.jpg"> <!-- this one will be visible on mobile -->
<img class="d-none d-xs-block" src="normal-logo.jpg"> <!-- this one will be visible on everything else -->

或者如果您使用徽标作为背景图片。这样的Smth应该可以工作

@media (max-width: 767.98px) {
  .logo {
    background-image: url(mobile-logo.jpg);
  }
}
@media (min-width: 768px) {
  .logo {
    background-image: url(normal-logo.jpg);
  }
}

在移动版本的bootstrap页面中更改徽标

1 个答案: