Unterschied zwischen zwei Medien-Anfragen

Question

Nach CSS tricks, die Medien-Anfragen für ein iPhone 4:

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

} 

Meine Frage ist, was ist der Unterschied zwischen /* Portrait and Landscape */ Abfrage Medien und den /* Portrait */, /* Landscape */ Abfragen Medien? Wäre es nicht genug, /* Portrait and Landscape */ zu verwenden?

Answer 1

orientation ist eine zusätzliche Bedingung, abhängig davon, ob Sie diese Stile für einen Ansichtsanschluss anwenden möchten, der sich derzeit in einer Hoch-/Querformatanzeige befindet.

Die Eigenschaft max-device-width: 480px gilt auch, wenn Sie sich im Modus landscape befinden.

Zum Beispiel möchten Sie vielleicht nicht das Styling im Querformat ändern, weil weniger Platz ist "above the fold". Im Hochformat würden Sie zum Beispiel eher einen Chunky-Header verwenden, während Sie bei Landscape möglicherweise einen kompakteren Header verwenden, um die Nutzung von Immobilien zu reduzieren.

---

In Bezug auf die CSS-Tricks Dokumentation, sie zeigen nur, wie Sie & Landschaft sowohl Portait Ziel, oder einfach nur eine von der anderen Seite.