Всем привет!
CSS-спрайты создаются с фиксированными размерами иконок.
А как быть для адаптивной вёрстки, ведь иконки должны масштабироваться через media-queries, но их размеры зашиты в спрайте (картинка спрайта имеет фиксированный размер в пикселях)?
Если для спрайта использовать background-size, то все backround-position для иконок плывут - как это побороть?
Как вариант вижу создать миксин масштабирования в sass, который в зависимости от backround-size спрайта пересчитывает backround-position и размеры для иконок. Но это как то сложно, может проще можно?
Вот код спрайта:
.sprite {
background-image: url(../img/sprite/sprite.png);
background-repeat: no-repeat;
display: block;
}
.sprite-icon-delete {
width: 15px;
height: 16px;
background-position: -5px -5px;
}
.sprite-icon-embed {
width: 16px;
height: 7px;
background-position: -56px -5px;
}
