CSS se expandindo com base no tamanho da tela de retrato ou paisagem?

Question

Eu tenho dois divs que estão flutuando um ao lado do outro. O que eu gostaria é ter uma largura de 100px quando você estiver olhando para o modo retrato e digamos 200 px na paisagem. Isso acontece na visualização em um dispositivo móvel, na verdade.

Portanto, a div se expandirá quando no modo paisagem e encolherá um pouco em retrato.

Alguma ideia?

Answer 1

Bem, isso não é possível com o CSS2, mas seria possível fazer o que você deseja com JavaScript (leia o tamanho da tela etc.).

Não tenho certeza em qual tecnologia você está analisando, mas o CSS3 fornece exatamente o que você deseja com Consultas de mídia CSS3.

Com o CSS3, você tem coisas divertidas como essa (ou pode até especificar a largura, por exemplo, 200px):

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

Verificação de saída esta página de exemplo Para mais explicações, ou Este.

EDITAR Só porque encontrei esta página hoje: Consultas de mídia CSS3 Hardboiled - muito bom escrever.

Answer 2

Você pode fazer isso usando o recurso CSS Media "Orientation". Dessa forma, você pode especificar estilos, dependendo da orientação da tela, não relacionada a partir do tamanho da tela. Você pode encontrar a definição oficial do W3.org sobre esse recurso de mídia aqui. Combinado com as especificações sobre desenvolvedor.mozilla.org Isso explicará como funciona.

---

Citação de W3.org sobre o recurso de mídia de 'orientação':

O recurso de 'orientação' é 'retrato' quando o valor do 'altura'O recurso de mídia é maior ou igual para o valor do 'largura'Recurso da mídia. Caso contrário, 'orientação' é 'paisagem'.

Uma nota/citação do desenvolvedor.mozilla.org sobre o recurso "Orientação":

Nota: este valor (ou seja, retrato ou paisagem) faz não corresponde a real orientação do dispositivo. A abertura do teclado suave na maioria dos dispositivos na orientação do retrato fará com que a viewport se torne mais larga do que é alta, fazendo com que o navegador use estilos de paisagem em vez de retrato.

---

Portanto, para reiterar, na verdade não é a orientação da tela que desencadeia consultas de retratos ou paisagem. No entanto, é a proporção entre a altura e a largura da tela! Por isso, também faz sentido usar o "recurso de orientação" com dispositivos não móveis/táteis, portanto, adicionei uma pequena demonstração para mostrar o comportamento dessas consultas de mídia.

Demonstração JSfiddle (tente redimensionar a porta de exibição)

Aqui estão as consultas representativas da mídia que afetam o retrato e a orientação da paisagem.

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

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

 }