was soll ich verwenden (min-device-width) und (min-width)?

Question

Ich mache ein paar Tests auf dem RWD (Responsive Web Design) und war für die häufigsten Haltepunkte suchen. Ich kam in dieses:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
body { 
background-color: #7763a5; } 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
body { 
background-color: #011C40; } 
} 

@media only screen and (min-width : 1224px) { 
body { 
background-color: #3957FC; } 
} 

Ich versuchte, das Fenster meines Browsers (mit Chrome) und fand heraus, um die Größe, dass keine der Arten wirksam mit Ausnahme des einen mit dem (min-width : 1224px) Attribut.

Warum passiert das und wie soll ich für tragbare Geräte Stile testen? Ist es auch OK, die bedingte Anweisung für die anderen Geräte so zu schreiben?

Da die letzte auf Desktop gerichtet ist nur ohne den "Gerät" Teil geschrieben, in den anderen Aussagen erwähnt.

Ich habe diese Frage geprüft difference between max-width and max-device-width. Um fair zu sein, habe ich etwas aus der Antwort bekommen, weiß aber immer noch nicht, warum mein Browser auf meinem Desktop die Stile nicht anwendet, wenn ich die Größe des Fensters ändere.

Answer 1

können Sie verwenden

@media (max-width: px) {} 
@media (min-width: px) {} 

Für jede Größe