CSS se expandindo com base no tamanho da tela de retrato ou paisagem?
Pergunta
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?
Solução
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.
Outras dicas
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*/
}