Porträt UND Landschaft VS. Porträt und Landschaft trennen

Question

Sollte ich Landschafts- und Portrait zusammen wie

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

oder getrennt wie

@media only screen and (min-width : 321px) {} für Landschafts

@media only screen and (max-width : 320px) {} für Portrait

Oder alles zusammen? Was ist der Unterschied hier?

Answer 1

Die obere Abfrage zielt nur auf Bildschirmbreiten zwischen320px und 480px.

@media only screen and (min-width : 321px) {} zielt auf etwas breiter als 321px.

@media only screen and (max-width : 320px) {} zielt auf etwas kleiner als 320px.

Sie könnte so etwas wie @media only screen and (min-width: 320px) and (orientation: landscape) {} hinzufügen, die nur true zurück, wenn das Gerät 320px oder breiter und in Landschaft.

ist auch in Medienabfragen zulässig.

Answer 2

Sie können sie zusammen tun, wenn Sie die Ausrichtung mit der Abfrage Medien setzen

@media only screen and (max-device-width: 320px) and (orientation: landscape), 
@media only screen and (max-device-width: 480px) and (orientation: portrait) { 
/* styles here */ 
}