Question

我的主题应该是响应但是当我上传Logo在我的网站时，它停止响应。因此，我可以为无响应设计设置一个徽标（大），为响应式设计设置其他（小）徽标。

Answer 1

您希望何时能够做出响应？何时您希望它不响应？您听起来想要达到的大部分内容都可以通过媒体查询完成。

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

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

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

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

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

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

2 个答案: