Como posso detectar qual dimensão da janela é maior apenas usando a consulta de mídia CSS? - css, media-queries

Alguém sabe como criar uma consulta de mídia que se comportaria assim:

@media screen e (largura Melhor que altura){}

ou

@media screen e (altura menos que largura){}

Para o que é afirmado no especificação de sintaxe Não é possível usar "media_feature" como valores. Existe alguma solução sem usar JavaScript? A coisa mais próxima que consegui foi usando proporção de aspecto, mas não era funcional.

Obrigado.

Respostas:

3 para resposta № 1

Você pode usar uma consulta de mídia de orientação:

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

De Especificação de consultas de mídia do W3C:

O recurso de mídia de "orientação" é "retrato" quando o valor do recurso de mídia de "altura" é maior ou igual ao valor do recurso de mídia de "largura". Caso contrário, a "orientação" é "paisagem".

Mas note que geralmente faz mais sentido se preocupar com a largura real do que a orientação, veja isto artigo no QuirksBlog para detalhes.

---

2 para resposta № 2

A resposta do @ N3dst4 só funciona se a sua comparação for 1: 1. Se você está procurando por algo diferente, você pode usar aspect-ratio:

@media screen and (max-aspect-ratio:4/3) {
#bg {
width: auto;
height: 100%;
}
}

@media screen and (min-aspect-ratio:4/3) {
#bg {
width: 100%;
height: auto;
}
}

Eu usei o trecho acima para dimensionar corretamente uma imagem de plano de fundo de 4: 3.

---

1 para resposta № 3

Segundo hit no google: http://css-tricks.com/6731-css-media-queries/

Primeira parte do exemplo nessa página:

<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css" />

Usando max-width ou max-height é o mesmo que "altura menor que" etc.

O mesmo vale para a altura.

---