Как сделать адаптивный логотип из длинного текста в короткий или в картинку CSS?

Question

[zakalindor]

Доброго времени суток, товарищи Мудрецы :)

Суть моего вопроса:
В меню вместо прописан текст, пример - Пироженки из Питера, как сделать так, чтоб при уменьшении экрана вместо этого длинного текста был текст меньше - ПиП, к примеру или логотип компании, в виде картинки?

Большое спасибо, извините, если вопрос слишком простой :)

Comments

[Ankhena]

<a class="logo" href="" data-text="ПиП"><span>Пироженки из Питера</span></a>

На мелких экранах скрываете спан, показываете псевдоэлемент, у которого в content: attr(data-text)
Либо картинка в том же псевдо.

Answer 1

[Aetae]

Есть много способов, но мне нравится вот такой трюк.

Answer 2

[Антон Шаманов]

@media (max-width: 600px) {
  сss мобильной версии
}
@media (min-width: 600px) {
  сss десктопной версии
}

Медиа-запросы