css - 我的网站可以有两个 Wordpress 徽标吗？一个用于响应式设计，另一个用于非响应式设计？

Question

我的主题应该是响应式的，但是当我在我的网站上上传徽标时，它停止响应。所以我可以有一个标志（大）用于非响应式设计，另一个（小）用于响应式设计。

Answer 1

您希望它什么时候响应，什么时候不响应？您听起来想要实现的大部分内容都可以通过媒体查询来完成。

.logo{
background-image: url(images/image_nonresponsive.jpg);
}

@media (max-width: 320px) {
.logo{
background-image: url(images/image_responsive.jpg);
}

这将使您的响应式徽标的宽度为 320 像素。

Answer 2

还有另一种方法：

HTML

<img src="logo_mobile.jpg" class="visible-mobile" />
<img src="logo_desktop.jpg" class="hidden-mobile" />

CSS

.visible-mobile{ display: none; }
.hidden-mobile{ display: inherit; }

@media (max-width: 320px) {
    .visible-mobile{ display: inherit; }
    .hidden-mobile{ display: none;  }
}

这将根据您的屏幕尺寸显示或隐藏您的徽标。你可以在这里看到一个例子：http : //cdpn.io/wyqxz

不同之处在于，在这种情况下，两个图像都将从您的浏览器加载，因此不是您网站性能的最佳解决方案。