当屏幕尺寸发生变化时，如何使响应式徽标完全改变？

Question

我对Responsive Logos感到非常惊讶，当您调整浏览器大小时，图像宽度不仅仅是说100％，而且图像本身也会发生变化。这不是一种字体。我认为它是一个svg图像，但我怎么也不确定他是如何设法改变图像的。是通过源代码底部的CSS：

@media only screen and (min-width: 15em) {
    .logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8 {background-position: left -900px;}
}

@media only screen and (min-width: 28em) {
    .logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8 {background-position: left -600px;}
}

@media only screen and (min-width: 45em){
    .logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8 {background-position: left -300px;}
}

@media only screen and (min-width: 60em){
    .logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8 {background-position: left 0px;}
 }

提前感谢您的帮助！

Answer 1

背景图片是image sprite。

精灵包含多个版本的徽标，每个版本位于不同的位置。 background-position用于按0px，300px，600px或900px水平移动图片，以选择所需的徽标。