css ¿expansión basada en tamaño de pantalla vertical u horizontal?

Question

Tengo dos divs que flotan uno al lado del otro. Lo que me gustaría es que tenga un ancho de 100 px cuando lo mires en modo vertical y digamos 200 px en el paisaje. Esto sucede en realidad en un dispositivo móvil.

Por lo tanto, el div se expandirá cuando esté en modo horizontal y se contraerá un poco en vertical.

¿Alguna idea?

Answer 1

Bueno, esto no es posible con CSS2, pero sería posible hacer lo que quiera con Javascript (leer el tamaño, etc. pantalla).

no estoy seguro de lo que la tecnología que busca entrar, pero CSS3 proporciona exactamente lo que quiere con CSS3 Media Queries.

Con CSS3 que tienen cosas divertidas como esta (o incluso se podría especificar el ancho de 200 píxeles por ejemplo):

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles here */ 
} 
/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles here */ 
} 

Salida this example page para más explicación o this one.

EDIT Justo porque he encontrado esta página hoy: - muy buena redacción.

Answer 2

Puede hacerlo utilizando la función "orientación" de css media. De esta forma puede especificar estilos dependiendo de la orientación de la pantalla, sin relación con el tamaño de la pantalla. Puede encontrar la definición oficial de w3.org sobre esta función de medios here. Combinado con las especificaciones en developer.mozilla.org, esto explicará cómo funciona.

---

Presupuesto de w3.org sobre la función de medios 'orientación':

la función de medios 'orientación' es 'retrato' cuando el valor de la 'altura' medios característica es mayor que o igual al valor de la 'anchura' función de medios . De lo contrario, 'orientación' es 'paisaje'.

Una nota/cita de developer.mozilla.org acerca de la característica "orientación":

Nota: Este valor (es decir, vertical u horizontal) hace no corresponden a real orientación del dispositivo. Al abrir el teclado virtual en la mayoría de los dispositivos en orientación vertical, hará que la ventana gráfica sea más ancha que alta, lo que ocasionará que el navegador utilice estilos de paisaje en lugar de retrato.

---

Así que reiterar, no es en realidad la orientación de la pantalla que desencadena vertical u horizontal preguntas de los medios. ¡Sin embargo, es la relación entre la altura y el ancho de la pantalla!Debido a esto, también tiene sentido utilizar la "función de orientación" con dispositivos no móviles/táctiles, por lo que agregué una pequeña demostración para mostrar el comportamiento de estas consultas de medios.

JSFIDDLE DEMO(intente cambiar el tamaño de la ventana de observación)

Estas son las preguntas de los medios de representación que afectan a la orientación vertical y horizontal.

@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
    /*set width to 100px */ 

} 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
    /* set width to 200px*/ 

}