изменение логотипа в мобильной версии начальной страницы

Question

В мобильной версии сайта, как мне изменить логотип? Я попытался уменьшить размер изображения логотипа для мобильной версии. Но мне нужно изменить сам логотип. Может ли кто-нибудь помочь в его решении? Я использую медиа-запросы для установки пользовательских стилей для мобильной версии в bootstrap.

Answer 1

Вы можете использовать классы visible-xs и hidden-xs для отображения разных логотипов в зависимости от устройства.

<img class="visible-xs" src="mobile-logo.jpg"> <!-- this one will be visible on mobile --> 
<img class="hidden-xs" src="normal-logo.jpg"> <!-- this one will be visible on everything else --> 

или если вы используете логотип в качестве фонового изображения. Smth как это должно работать

@media (max-width: 767px) { 
    .logo { 
    background-image: url(mobile-logo.jpg); 
    } 
} 
@media (min-width: 768px) { 
    .logo { 
    background-image: url(normal-logo.jpg); 
    } 
}