4

Gostaria de uma informação sobre como usar media queries.

Como faço para definir media de um site nas abaixo?

  • 2560 x 1440
  • 2560 x 1080
  • 1920 x 1080
  • 1366 x 768
  • 1280 x 1024
  • 1280 x 768

Sendo que meu site é estendido a tela toda, ele é um layout que o height não desce fazendo barra lateral, e eu puxo a media pelo height.

Exemplo:

@media screen and (min-height:768px) and (max-height:1080px){
    ...
}

Usar os valores 2560 x 1440, 2560 x 1080, 1920 x 1080, 1366 x 768 e 1280 x 768 causa conflitos no media.

Como resolver?

1
  • Uma observação para outros users: se o site rola na vertical (que não é seu caso, pelo texto), você deve usar o width para fazer as queries, e não o height. Só faz sentido calibrar o media na vertical para coisas que tenham rolagem horizontal, (ou nenhuma, como na pergunta) ou para elementos específicos da página como navegação, etc, e não para o layout todo. Em casos extremos, dá pra usar juntos o width e o height no mesmo query, mas geralmente é exagero. TALVEZ no caso da pergunta em específico, seja a solução.
    – Largato
    Commented 5/06/2014 às 19:40

1 Resposta 1

4

Separe as medidas horizontais e vericais de cada elememnto em suas respectivas queries horizontais e verticais:

@media screen and (min-width:1280px)
   ... aqui voce põe larguras e posições horizontais dos elementos ...
   #minhadiv {width: 400px; left: 10px;}
}

@media screen and (min-width:1366px)
   ... aqui voce põe larguras e posições horizontais dos elementos ...
   #minhadiv {width: 450px; left: 15px;}
}

@media screen and (min-width:1920px)
   ... aqui voce põe larguras e posições horizontais dos elementos ...
   #minhadiv {width: 600px; left: 20px;}
}

@media screen and (min-height:768px)
   ... aqui voce põe alturas e posições verticais dos elementos ...
   #minhadiv {height: 200px; top: 10px;}
}

@media screen and (min-height:1080px)
   ... aqui voce põe alturas e posições verticais dos elementos ...
   #minhadiv {height: 300px; top: 20px;}
}

Se precisar de alguma combinação especial, basta usar as duas medidas juntas, mas cuidado que, ao ser muito específico, fica mais complicado de localizar problemas:

@media screen and (min-width:1366px) and (min-height:1080px)
   #minhadiv {width: 200px; height: 300px; left:80px; top: 20px; color:#eee ... }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .