Как использовать css спрайты в адаптивной вёрстке?

Question

[Думай Головой]

Всем привет!

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;
}

Answer 1

[Тимофей]

Если иконки однотонные, то лучше шрифтовые использовать. Вот эта штука позволяет делать шрифт из SVG иконок. Многие фигуры можно повторить через css.

Answer 2

[Андрей Б.]

Масштабировать спрайт не получится. Делайте через SVG
css.yoksel.ru/svg
css.yoksel.ru/svg-decoration
https://uwebdesign.ru/svg-sprites/
или отказывайтесь от спрайта и делайте отдельными картинками

Comments

[Думай Головой]

Андрей Б.
svg не варик, слишком много лишнего кода требуется, к тому же дизайн не всегда в илллюстраторе дают, как правило это растровый psd.
наверное буду юзать вариант с sass автоматизацией и перерасчёта, один раз напишу и на все случаи хватит

Answer 3

[Андрей]

На хабре была статья про использование относительных единиц смещения позиций спрайта.