Publicação

Casos diferentes de uso de medidas nas mídia querye

foto de
Andre Rodrigues CONTEÚDO EM DESTAQUE

(Imagem retirada do Google)

Seria possível usar outras medidas além das tradicionais px e em nas mídias queryes? Sim é possível! Antes de mostrar com um exemplo pratico que possível, vamos algumas explicações básicas.

Antes de mais nada vamos bater um papinho, estamos falando até então de Breakpoints ou para simplificar controle de telas. Eles nos permite controlar os nossos containers e outros elementos para que possam respeitar uma determinada tela e assim mostrar informação sem perder qualidade de imagens e textos. Atualmente são usados dois tipos de medidas px e em, se você é novato no assunto é basicamente isto:

@media(min-width: 768px){ a partir dessa largura minima de tela tal objeto ou elemento faz x ação }
@media(min-width: 48em){a partir dessa largura minima de tela tal objeto ou elemento faz x ação}

 Bom apesar de ambos exemplos serem mesmo tamanho de tela, não foi nada de tão anormal! Agora vamos ao nosso foco que é uso de outros medidas. Claro que isso é um estudo pessoal e que ainda o pessoal da W3C não divulgou nenhum estudo em cima disso a público. A medida que usei no exemplo foi a Vmin que foi aceita nos navegadores que uso Chrome e Firefox. Talvez possa já haver desenvolvedores que usam a media na mídia querye, o fato é que achei muito interessante usar ela, claro que como a medida (em), você irá precisar fazer alguns cálculos para achar o tamanho da tela para se comportar corretamente. Mas de certa forma mesmo sendo para muitos algo talvez de ser surpreendente eu fico feliz por ter visto está forma diferente de uso de medida no controle de telas na mídia querye. Bom sem mais delongas aí está o link do exemplo em ação:  https://codepen.io/AndreRodrigues/pen/xdvNZG


Comentários