Jak ustawić zapytania o media portretowe i krajobrazowe w css?

Question

Oto moje zapytanie o media:

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

Ale w tabletce, jeśli jest ona w trybie poziomym, to div pokazuje

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

Jeśli jest w trybie pionowym, to div pokazuje

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

Chcę, aby ten blok .visible-tablet pokazywał się zawsze za każdym razem, gdy przełączam tablet na tryb automatycznego obracania (który będzie dla portretu i krajobrazu)

Użyłem jednak portretu i warunków krajobrazowych, ale wciąż mam do czynienia z tym problemem. Wszelkie komentarze?

Answer 1

iPad media Zapytania (wszystkie pokolenia - w tym iPada mini)

Dzięki pracy Apple'a w tworzeniu spójnego doświadczenie dla użytkowników, a także łatwy czas dla programistów, wszystkie 5 różnych iPad (iPad i iPad mini 1-5) można kierować za pomocą tylko jednego zapytania o media CSS. Następne kilka wierszy kodu powinno działać idealnie na responsywny projekt.

iPad w portret & krajobraz

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

iPad w krajobrazie

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

iPad w portret

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

iPad 3 & 4 Mediów Zapytania

Jeśli szukasz kierować tylko 3 i 4 generacji Retina iPadów (lub tabletek z podobnym rozdzielczości), aby dodać @ 2x graficznych lub innych cech dla Retina wyświetlaczu tabletu, użyj następujących zapytań o media.

Retina iPad w portret & krajobraz

@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 w krajobrazie

@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 w portret

@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 Mediów Zapytania

Jeśli szukasz dostarczyć różne grafiki lub wybierz inny typografii dla niższych rozdzielczości ekranu iPada, zapytania multimedialne poniżej będzie działać jak czar w swojej elastycznego projektowania!

IPAD 1 & 2 w układzie pionowym & krajobraz

@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 w orientacji

@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 w układzie pionowym

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

Źródło: http://stephen.io/mediaqueries/

Answer 2

Może być również tak proste, jak ten.

@media (orientation: landscape) { 

}