Question

好的，我搜索了互联网和stackoverflow，但我仍然眼花缭乱。

我正在为我和我的家人建立一个个人起始页面（当你打开webbrowser时，它将在此页面上开始）。大多数东西都在运行，我开始使用CSS sprites，因为我确实希望保持负载。现在我开始使用几个不同的精灵并根据@media规则使用的分辨率隐藏它们。

然后我开始思考;我仍然会浪费带宽和增加下载时间，因为它仍然会加载3个不同的精灵（3种不同的分辨率）。所以我搜索了Google，发现可以创建一个叫做“响应式CSS精灵”的东西。或类似的。但是，这是我遇到的问题。

我使用了以下生成器：http://responsive-css.spritegen.com

稍微调整输出并将其放在我的网站上。虽然图像（=精灵）确实显示，可点击并且悬停/活动都可以工作，但由于某种原因它根本不会调整它们的大小。我真的不知道我在这里做错了什么。也许有人可以解释我应该做什么或我做错了什么。

下面是我目前使用的部分编码（html和css）。

CSS部分：

.router, .diskstation, .sabnzbd, .couchpotato, .sickbeard, .vanderlingen, .neverlands, .linkplanet, .dszl{ max-width: 100%; background-size: 500%; background-image: url('../../../img/knoppen/navigatie-knoppen.hr.png'); }

.router { background-position: 0 88.461538%; background-size: 138.709677%; }
.router:hover { background-position: 0 84.615385%; background-size: 138.709677%; }
.router:active { background-position: 0 80.769231%; background-size: 138.709677%; }
.diskstation { background-position: 0 30.769231%; background-size: 108.860759%; }
.diskstation:hover { background-position: 0 26.923077%; background-size: 108.860759%; }
.diskstation:active { background-position: 0 23.076923%; background-size: 108.860759%; }
.sabnzbd { background-position: 0 76.923077%; background-size: 130.30303%; }
.sabnzbd:hover { background-position: 0 73.076923%; background-size: 130.30303%; }
.sabnzbd:active { background-position: 0 69.230769%; background-size: 130.30303%; }
.couchpotato { background-position: 0 19.230769%; background-size: 101.176471%; }
.couchpotato:hover { background-position: 0 15.384615%; background-size: 101.176471%; }
.couchpotato:active { background-position: 0 11.538462%; background-size: 101.176471%; }
.sickbeard { background-position: 0 65.384615%; background-size: 117.808219%; }
.sickbeard:hover { background-position: 0 61.538462%; background-size: 117.808219%; }
.sickbeard:active { background-position: 0 57.692308%; background-size: 117.808219%; }

这只是我使用的CSS精灵的一小部分，但你明白了。另外，这是我从生成器获得的代码，至少是它的大部分代码。：）

以下是HTML部分：

<a href="router.php"><img class="router" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAABDAQMAAABk/POFAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjAK6AQAEcwABmWJweQAAAABJRU5ErkJggg=="></a>
<a href="diskstation.php"><img class="diskstation" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4AAABDAQMAAABX6y7JAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABRJREFUeNpjYBgFo2AUjIJRMAAAAAV/AAHDdSA9AAAAAElFTkSuQmCC"></a>
<a href="sabnzbd.php"><img class="sabnzbd" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAABDAQMAAABnZz/oAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABJJREFUeNpjYBgFo2AUjIKhBAAEtgABaCn4jwAAAABJRU5ErkJggg=="></a>
<a href="couchpotato.php"><img class="couchpotato" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAABDAQMAAAA28wyLAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABRJREFUeNpjYBgFo2AUjIJRMGIBAAYFAAFf0+w8AAAAAElFTkSuQmCC"></a>
<a href="sickbeard.php"><img class="sickbeard" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJIAAABDAQMAAABN185HAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAABRJREFUeNpjYBgFo2AUjIJRQCoAAAU8AAF2NOTmAAAAAElFTkSuQmCC"></a>

如上所述;图像（=精灵）显示正确且可点击;偶数：悬停和：激活两个工作，但是当我调整窗口大小时它只是不缩放它们？？

澄清我想在这里实现的目标;我只是希望图像在较低分辨率下调整大小。例如，如果我的父亲使用网站，它应该使图像更小，如果我在家里使用网站它不应该调整大小（并保持其原始值）。

我不知道我是否正确解释过;英语不是我的母语，但我认为我很清楚（如果我自己这样说的话）。

先谢谢大家的帮助和意见......！

//更新＃1

回应user3125923

你所说的实际上是有意义的，所以我将每个精灵放在一个名为sprite_class的类中。接下来我将@media的东西添加到我的CSS中，看起来像是：

@media (min-width:2048px){
.sprite_class{width:90%;
}
}

@media (min-width:1301px) and (max-width:1983px){
.sprite_class{width:60%;
}
}

@media (max-width:1300px){
.sprite_class{width:30%;
}
}

然而，不幸的是，他们仍然没有调整大小。可能我做错了什么，但不知道是什么...... :(

//更新＃2

这里取得了一些进展。它不是将它们调整为较小的图像，而是放大了精灵？！当我设置宽度：100％时，它会放大图像很多次。我应该将每个div设置为像素的最大数量吗？例如：max-width：128px

在此期间会尝试，看看是否有效，但我认为应该有更简单的方法。

//更新＃3

Pfft ...我放弃了。我不知道我在这做什么。我目前只是让事情变得越来越糟。现在我设法扩展到较低的分辨率，但现在它们在图像之间有空的空间（认为它是由某处的宽度设置引起的），所以即使它缩小（取决于分辨率）它仍然占用原始空间。非常非常无聊。特别是考虑到我已经忙着这个废话超过一天了。此外，悬停/活动图像不再与原始图像正确对齐。生病和厌倦了.......！

我想我会创建3个单独的精灵集并隐藏那些没有使用过的精灵集。当然，它会增加负荷，但至少我知道这有效。对于了解所有这些的人来说很有趣，但是......

//更新＃4

正如更新＃4中所提到的，我厌倦了我花在这上面的所有时间。没有任何效果（可能是我的错，但仍然非常非常烦人）。所以我创建了3个单独的精灵图像，它现在只根据使用的分辨率加载正确的精灵图像。问题解决了。花了我不到3分钟。哪个比头疼更好......＆＃34;做正确的方式＆＃34;给了我......

我会在一天左右的时间内回来查看是否有其他人发布了一个有效的解决方案，而不是我之前段落中描述的解决方案......

Answer 1

您可以像使用媒体查询之前那样添加精灵，不需要加载3个图像，只需缩小一个精灵，具体取决于屏幕的大小。类似的东西：

@media screen (min-width 767px) {
 .sprite_class {
  width: 100%;
}
}

@media screen (max-width 768px) {
 .sprite_class {
  width: 70%;
}
}

等等。

用作超链接的响应式CSS精灵不会调整大小

1 个答案: