@media screen and (max-width: 1024px) { .logo { background-image: url("img/logo.png") !important; }} @media screen and (max-width: 960px) { .logo { background-image: url("img/mobil-logo.png") !important; }} @media screen and (max-width: 768px) { .logo { background-image: url("img/mobil-logo.png") !important; }} @media screen and (max-width: 640px) {.... } @media screen and (max-width: 480px) {.... }
Media screen sorguları ile bu istediğini yapabilirsin.
daha fazla detay için googlede css media screen sorguları hakkında fikir alabilirsin.
Yukarıda ki kodlar işini çözecektir.
her ekranda farklı logo gösterir.
logonun genişlik ve yükseklik değerlerini unutma kolay gelsin