html - notas - ¿Cómo configurar las consultas de medios verticales y horizontales en css?

menu horizontal html sin css

Question

Aquí está mi consulta de medios:

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

Pero en tableta, si está en modo paisaje, esta div está mostrando

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

Si está en modo retrato, esta div está mostrando

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

Quiero que esta div. .visible-tablet se muestre siempre que cambie mi tableta al modo de rotación automática (que será para vertical y horizontal)

Pero utilicé el retrato y las condiciones del paisaje, pero todavía estoy enfrentando este problema. ¿Algún comentario?

Answer 1

Consultas de medios de iPad (todas las generaciones, incluido iPad mini)

Gracias al trabajo de Apple para crear una experiencia consistente para los usuarios y un tiempo fácil para los desarrolladores, los 5 iPads diferentes (iPad 1-5 y iPad mini) se pueden orientar con una sola consulta de medios CSS. Las siguientes líneas de código deberían funcionar perfectamente para un diseño receptivo.

iPad en retrato y paisaje

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

iPad en paisaje

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

iPad en retrato

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

iPad 3 y 4 consultas de medios

Si está buscando apuntar solo a los iPads Retina de tercera y cuarta generación (o tabletas con resolución similar) para agregar @ 2x gráficos u otras funciones para la pantalla Retina de la tableta, use las siguientes consultas de medios.

Retina iPad en retrato y paisaje.

@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 en paisaje

@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 en retrato

@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 consultas de medios

Si está buscando suministrar diferentes gráficos o elegir una tipografía diferente para la pantalla del iPad de resolución más baja, las siguientes consultas de medios funcionarán como un encanto en su diseño sensible.

iPad 1 y 2 en retrato y paisaje

@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 y 2 en paisaje

@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 y 2 en retrato

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

Fuente: http://stephen.io/mediaqueries/

Answer 2

También puede ser tan simple como esto.

@media (orientation: landscape) {
}