Media Queries Verticais

Hello folks, neste post vou mostrar como usar as Media Queries na vertical, muito se fala na largura dos dispositivos, mas as Media Queries são tão sutilmente úteis em alguns casos, que é fascinante como elas podem nos ajudar.

Vou mostrar apenas o conceito e tentar supor um exemplo prático, vamos soltar a imaginação nas possibilidades, ok?

As paredes estão encolhendo.

Impossível não imaginar as cenas de filmes que as paredes vão encolhendo até esmagar alguém, como um labirinto. É mais ou menos isso que fazemos quando estamos testando Media Queries não? hahaha enfim.

[code lang=”css”]
@media screen and (min-height:700px) {
// Save your content!
}
[/code]

O exemplo que irei fazer, é meio radical e vou precisar da colaboração de você para que possa entender.

Media Queries Verticais para mostrar menos conteúdo

Percebo que a maioria das publicações em blogs são sobre como ocultar e mostrar conteúdo com Media Queries quando as telas estão menores na horizontal. Se tratando de desktop tem um exemplo fatal para mostrar sobre Media Queries Verticais.

Sabe aqueles blogs que tem o conteúdo em uma sidebar fixa? E as vezes esse conteúdo passa o tamanho da tela/dispositivo e não temos como rolar aquela parte da página por que esta com position: fixed? Simplesmente perdemos o conteúdo, mas podemos salvar esse conteúdo se usarmos Media Queries.

Um exemplo de serviço bem feito, é o site do Leandro Oriente leandrooriente.com/, se você tiver um tamanho de tela, considerável adequado, o site dele apresenta uma sidebar com um menu e outros links fixos na lateral.

Mas se o tamanho da tela for menor que o tamanho que a sidebar precisa, ele simplesmente tira a sidebar da lateral e a coloca como rodapé da página, talvez ele pudesse encontrar uma solução fazendo o menu ficar mais exposto, mas foi assim que ele resolveu, e ficou muito bem feito.

Bom com este post eu gostaria de passar a ideia sobre Media Queries Verticais.

Media Queries Verticais para mostrar mais conteúdo

Bom como comentei acima, nós usamos muito as Media Queries para ocultar ou mostrar conteúdo para diferentes dispositivos, mas me veio a cabeça usar Media Queries para mostrar mais conteúdo, ou propaganda. Por que parece que temos dois extremos PC’s com telas enormes e SmartPhones com telas pequenas.

Então, se identificarmos que a altura da tela de um usuário é grande o bastante para manter a barra do Globo.com com conteúdo notícias, esportes, entretenimento, vídeos fixada ao topo, com certeza seria algo útil, por que se temos tela o suficiente grande para isso, não iremos atrapalhar o usuário, por que não fazer isso? Ou oferecer algum outro conteúdo mais apropriado para as metas do site.

O Facebook já faz isso, quando o usuário tem uma tela adequada para ver um bom conteúdo, ele fixa a barra azul ao topo e quando o usuário tem uma tela menor, a barra azul no topo não fica fixa deixando mais espaço para os usuários já que a tela dele não é muito grande, inteligente né? Mas eles não usam Media Queries para isso(pelo menos eu não encontrei inspecionando;)

Conclusão

Bom, este post foi mais sobre para que utilizar do que para como utilizar, mas existe muito conteúdo sobre como utilizar, vou deixar aqui alguns links que você pode precisar para quando for fazer coisas incríveis com Media Queries por ai.

É isso ai, até a próxima ;D

As imagens mostradas neste post, são respectivamente prints dos sites, leandrooriente.com e g1.globo.com e a imagem destacada no topo é de http://instagram.com/p/Ttcg4EL-bR/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *