La expansión de CSS basado en retrato o paisaje pantalla de tamaño?

Question

Tengo dos divs que están flotando junto a la otra. Lo que me gustaría es tener que tiene un ancho de 100 px cuando usted está buscando en ella en modo vertical y le permite decir 200 px en el paisaje. Esto sucede su visualización en un dispositivo móvil en realidad.

Así que el div se expandirá cuando se encuentra en modo de paisaje y reducir un poco en el retrato.

¿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 de la pantalla, etc.).

No estoy seguro de lo que la tecnología que busca entrar, pero CSS3 ofrece exactamente lo que quiere con consultas de medios de CSS3 .

Con CSS3 que se divierten cosas 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 */
}

este ejemplo página para una explicación más detallada, o éste .

Editar El hecho de que me encontré con esta página actual: Hardbroiled CSS3 Consultas de medios -. muy buena valoración crítica

Answer 2

Se puede hacer esto mediante el uso de la función de medios css "orientación". De esta manera usted puede especificar estilos dependiendo de la orientación de la pantalla, sin relación del tamaño de la pantalla. Usted puede encontrar la definición oficial w3.org sobre este medio de comunicación cuentan aquí . Combinado con las especificaciones en developer.mozilla.org esto explicará cómo funciona.

---

Presupuesto de w3.org sobre la función de los medios de comunicación ‘orientación’:

  

La función de los medios de comunicación ‘orientación’ es ‘retrato’ cuando el valor de la   ‘ altura ’ función de medios es mayor que o igual para el valor de la   ‘ anchura ’ disponen de medios de comunicación. De lo contrario, ‘orientación’ es ‘paisaje’.

Una nota / cita de developer.mozilla.org sobre la función de la "orientación":

  

Nota: Este valor (es decir, vertical u horizontal) hace no corresponden a real orientación dispositivo .   Abriendo el teclado en pantalla en la mayoría de los dispositivos en el retrato voluntad orientación   hacer que la ventana gráfica para convertirse más ancho que alto, lo que provoca   el navegador para usar estilos de paisaje en lugar de vertical.

---

Así que reiterar, no es en realidad la orientación de la pantalla que las consultas de los factores desencadenantes de retrato o paisaje de medios. Sin embargo, es la relación entre la altura y la anchura de la pantalla! Debido a esto también tiene sentido utilizar la "característica de orientación" con dispositivos que no son / táctiles móviles por lo tanto, he añadido una pequeña demostración para mostrar el comportamiento de estas preguntas de los medios.

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

Aquí están 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*/

 }