Aktivieren Sie ein neues Logo innerhalb einer div in einer bestimmten Breite

Question

Ich möchte ein anderes Logo Bild haben, wenn meine Website auf Tablet/Handy-Größe geht. Ich dachte, der beste Weg, dies zu tun ist, anstatt eine img src innerhalb der div, setzen Sie das Logo als Hintergrundbild zu meinem div/id.

Wenn meine Seite unter 990px ​​geht, wird ein anderes Handy-Logo angezeigt.

Das ist, was ich habe, es funktioniert, aber ist dies der richtige Weg, dies zu tun?

https://jsfiddle.net/omca16oe/

<div id="logo"><a href="/home"></a></div> 

    #logo { 
     background-image:url('http://i.imgur.com/O49APFa.jpg'); 
     background-repeat: no-repeat; 
     display:block; 
     width:452px; 
     height:62px; 
    } 

    @media (max-width:990px) { 
    #logo { 
     background-image:url('http://i.imgur.com/CNYdTsD.jpg'); 
     background-repeat: no-repeat; 
     display:block; 
     width:452px; 
     height:62px; 
    } 
    } 

Answer 1

Es funktioniert, aber in der Regel würden Sie ein Handy-first appropach in diesem Fall verwendet werden, da die Desktop-Logos/Bilder in der Regel größer sind und gar nicht auf mobile Geräte geladen werden, dann (= Verringerung der Bandbreite) wie:

#logo { 
      background-image:url('http://i.imgur.com/CNYdTsD.jpg');/* mobile logo */ 
      background-repeat: no-repeat; 
      display:block; 
      width:452px; 
      height:62px; 
} 
@media (min-width:991px) { 
    #logo { 
      background-image:url('http://i.imgur.com/O49APFa.jpg'); /* desktop logo */ 
    } 
} 

auch Wiederholung von Sachen zu vermeiden, die bereits vorhanden sind (wie "display: block" etc.)

Answer 2

Es ist der richtige Weg, dies zu lösen. Es gibt andere Wege, aber meiner Meinung nach ist dies wahrscheinlich das Beste.

Aber Sie können die CSS

<div id="logo"><a href="/home"></a></div> 

#logo { 
    background-image:url('http://i.imgur.com/O49APFa.jpg'); 
    background-repeat: no-repeat; 
    display:block; 
    width:452px; 
    height:62px; 
} 

@media (max-width:990px) { 
    #logo { 
     background-image:url('http://i.imgur.com/CNYdTsD.jpg'); 
    } 
} 

Sie verwenden die gleichen CSS für verschiedene Bildschirme reduzieren und auf diese Weise Sie nicht unnötig doppelten Code verfügen. Da Sie die anderen Werte im Block "@media .." nicht ändern, bleiben sie einfach gleich.

Answer 3

Der richtige Weg wäre, die Logogröße zu initialisieren und dann die Größe für die maximale Bildschirm- und Gerätebreite wie folgt zu ändern. Stellen Sie sicher, dass auch eine Gerätebreite zur Verdeutlichung auf mobilen Geräten vorhanden ist.

#logo { 
background-image:url('http://i.imgur.com/O49APFa.jpg'); 
background-repeat: no-repeat; 
display:block; 
width:452px; 
height:62px; 
} 


@media only screen and (max-width:500px) and (min-device-width : 768px) { 
    #logo { 
     width:200px; 
     height:20px; 
    } 
}