@media min und max beide oder nur ein

Question

Zum Beispiel verwenden beide

@media (min-width: 768px) and (max-width: 992px){...} @media (max-width: 768px) {...}

oder nur

@media (max-width: 992px) {...} @media (max-width: 768px) {...}

Was effizienter ist? Ich möchte Browser-Leistung!

Um die Breite weniger als 768px im zweiten Fall wird der Browser die Art zwei Mal anwenden, bis die richtige?

Answer 1

verwenden eine

@media (min-width: 768px) and (max-width: 992px){...} 
@media (min-width: 480px) and (max-width: 767px) {...} 

Auf dieser Weise Browser nicht gleiche CSS zweimal anwenden und Sie können CSS leicht mit unterschiedlicher Eigenschaft in verschiedenen Geräten Größe verwenden. Manchmal Browser überschreiben die CSS in anderen Gerät Medien Abfrage nicht, dann verwenden Sie !important in CSS.

Beispiel

@media (min-width: 768px) and (max-width: 992px){ 
.nav{max-width:900px;} 
} 
@media (min-width: 480px) and (max-width: 767px){ 
.nav{max-width:700px !important;} 
// only use important if browser not apply this property in this device size 
}