我的主题应该是响应式的,但是当我在我的网站上上传徽标时,它停止响应。所以我可以有一个标志(大)用于非响应式设计,另一个(小)用于响应式设计。
问问题
425 次
2 回答
0
您希望它什么时候响应,什么时候不响应?您听起来想要实现的大部分内容都可以通过媒体查询来完成。
.logo{
background-image: url(images/image_nonresponsive.jpg);
}
@media (max-width: 320px) {
.logo{
background-image: url(images/image_responsive.jpg);
}
这将使您的响应式徽标的宽度为 320 像素。
于 2013-07-05T16:16:36.400 回答
0
还有另一种方法:
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
不同之处在于,在这种情况下,两个图像都将从您的浏览器加载,因此不是您网站性能的最佳解决方案。
于 2013-07-05T16:37:34.760 回答