Wie stellen Sie Querformat- und Querformat-Medienabfragen in CSS ein?

Question

Hier ist meine Medienabfrage:

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){ 
    .hidden-desktop { 
    display: inherit !important; 
    } 
    .visible-desktop { 
    display: none !important ; 
    } 
    .visible-tablet { 
    display: inherit !important; 
    } 
    .hidden-tablet { 
    display: none !important; 
    } 
} 

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : landscape){ 
    .hidden-desktop { 
    display: inherit !important; 
    } 
    .visible-desktop { 
    display: none !important ; 
    } 
    .visible-tablet { 
    display: inherit !important; 
    } 
    .hidden-tablet { 
    display: none !important; 
    } 
} 
@media screen and (max-device-width: 767px) and (orientation: portrait) { 
    .hidden-desktop { 
    display: inherit !important; 
    } 
    .visible-desktop { 
    display: none !important; 
    } 
    .visible-phone { 
    display: inherit !important; 
    } 
    .hidden-phone { 
    display: none !important; 
    } 
} 
@media screen and (max-device-width: 767px) and (orientation: landscape) { 
    .hidden-desktop { 
    display: inherit !important; 
    } 
    .visible-desktop { 
    display: none !important; 
    } 
    .visible-phone { 
    display: inherit !important; 
    } 
    .hidden-phone { 
    display: none !important; 
    } 
} 

Aber in Tabletten-, wenn es im Querformat ist, wird dieses div

.visible-tablet { 
    display: inherit !important; 
    } 

zeigt Wenn es im Portrait-Modus ist, wird dieses div zeigt

Ich möchte diese div .visible-tablet immer angezeigt werden, wenn ich mein Tablet in Auto-Rotate-Modus (die für Hoch-und Querformat sein wird) wechseln

Aber ich habe Portrait- und Landschaftsbedingungen verwendet, aber ich stehe immer noch vor diesem Problem. Irgendwelche Kommentare?

Answer 1

iPad Media Queries (alle Generationen - inklusive iPad mini)

Dank Apples Arbeit in eine konsistente Erfahrung für die Nutzer zu schaffen und eine gute Zeit für die Entwickler, alle 5 verschiedenen iPads (iPad 1-5 und iPad mini) kann mit nur einer CSS-Medienabfrage ausgerichtet werden. Die nächsten paar Codezeilen sollten perfekt für ein responsives Design funktionieren.

iPad im Hochformat & Landschaft

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { /* STYLES GO HERE */} 

iPad in Landschaft

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */} 

iPad im Hochformat

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ } 

iPad 3 & 4 Media Queries

Wenn Sie nur 3. und 4. Generation Retina iPads (oder Tabletten mit ähnlicher Auflösung) zielen freuen @ 2x Grafiken hinzufügen oder anderen Funktionen für das Retina-Display des Tablets, Verwenden Sie die folgenden Medienabfragen.

Retina iPad im Hochformat & Landschaft

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */} 

Retina iPad in Landschaft

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */} 

Retina iPad im Hochformat

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ } 

iPad 1 & 2 Media Queries

Wenn Sie schauen, verschiedene Grafiken oder wählen Sie verschiedene Typographie für die niedrigere Auflösung iPad Anzeige zu liefern, unter den Medien-Anfragen werden wie ein Zauber in Ihrem ansprechenden Design arbeiten!

IPAD 1 & 2 in Portrait & Landschaft

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */} 

IPAD 1 & 2 im Quer

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */} 

IPAD 1 & 2 in Porträt

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ } 

Quelle: http://stephen.io/mediaqueries/

Answer 2

Es kann auch als dies so einfach sein.

@media (orientation: landscape) { 

}