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

Question

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

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

ou

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

Pelo que está declarado na especificação de sintaxe , não é possível usar'media_feature' como valores.Existe alguma solução alternativa SEM usar JavaScript?A coisa mais próxima que consegui foi usar a proporção, mas não era funcional.

Obrigado.

Answer 1

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

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

Da especificação W3C Media Queries :

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, 'orientação' é 'paisagem'.

Mas observe que normalmente faz mais sentido se preocupar com a largura real do que com a orientação. Consulte artigo no QuirksBlog para obter detalhes.

Answer 2

A resposta de @ N3dst4 só funciona se a sua comparação for 1: 1.Se estiver 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;
  }
}

Usei o snippet acima para dimensionar corretamente uma imagem de fundo 4: 3.

Answer 3

Segundo acesso 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' />

Usar max-width ou max-height é igual a "altura menor que" etc.

O mesmo vale para a altura.