web-dev-qa-db-de.com

Wie man Medienabfragen im Hoch- und Querformat in CSS einstellt?

Hier ist meine Medienanfrage:

@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;
  }
} 

Wenn sich das Tablet im Querformat befindet, wird dieses Div angezeigt

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

Wenn es sich im Hochformat befindet, wird dieses Div angezeigt

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

Ich will dieses div .visible-tablet wird immer angezeigt, wenn ich mein Tablet in den automatischen Rotationsmodus versetze (dies gilt für Hoch- und Querformat)

Ich habe zwar Hoch- und Querformat verwendet, stehe aber immer noch vor diesem Problem. Irgendwelche Kommentare?

25
UI_Dev

iPad Media Queries (alle Generationen - einschließlich iPad mini)

Dank der Bemühungen von Apple, eine konsistente Benutzererfahrung zu schaffen und Entwicklern Zeit zu sparen, können alle 5 verschiedenen iPads (iPads 1-5 und iPad mini) mit nur einer CSS-Medienabfrage angesprochen werden. Die nächsten Codezeilen sollten für ein ansprechendes Design perfekt funktionieren.

iPad im Hoch- und Querformat

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

iPad im Querformat

@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 Retina-iPads der 3. und 4. Generation (oder Tablets mit ähnlicher Auflösung) zum Hinzufügen von @ 2x-Grafiken oder anderer Funktionen für das Retina-Display des Tablets verwenden möchten, verwenden Sie die folgenden Medienabfragen.

Retina iPad im Hoch- und Querformat

@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 im Querformat

@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 Porträt

@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-Medienabfragen

Wenn Sie verschiedene Grafiken oder eine andere Typografie für das iPad-Display mit niedrigerer Auflösung verwenden möchten, wirken die folgenden Medienabfragen wie ein Zauber in Ihrem ansprechenden Design!

iPad 1 & 2 im Hoch- und Querformat

@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 Querformat

@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 im Hochformat

@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/

33
KiV

So einfach kann es auch sein.

@media (orientation: landscape) {

}
14
quemeful