Media Queries em CSS

Antes do surgimento dos smartphones e tablets os layouts de sites eram desenvolvidos levando em conta somente o tamanho das telas dos monitores de desktops. Neste post veja media Queries em CSS.

Nessa época não nos preocupávamos com resoluções e tamanhos de tela para desenvolver os nossos layouts, uma vez que todos acessavam a rede e navegavam pelos sites através do bom e velho PC.

Com a disseminação dos dispositivos móveis, e suas resoluções e tamanhos de tela diversificados, surgiu a necessidade de se desenvolver layouts que se adaptem aos seus displays.

O HTML foi desenvolvido para ser portátil, ou seja, ser interpretado por qualquer um desses novos dispositivos. O problema é que cada dispositivo exibe o HTML de forma distinta por conta da diversidade de tamanho de telas.

Para resolver este problema e facilitar a vida de nós desenvolvedores, surgiu o CSS, que é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.

O seu principal benefício é a separação entre o formato e o conteúdo de um documento (Cascading Style Sheets – Wikipedia.org).

Com o CSS e as Media Queries podemos desenvolver sites responsivos, ou seja, que se adaptam aos diversos tamanhos de telas dos dispositivos móveis. Media Queries são ferramentas poderosas que tornam possível isso.

Exemplo de código:

@media screen and (min-width:500px)
{
		nav 
		{
			float: left;
			width: 20%;
		}
		section
		{
			margin-left: 20%;
		}
	}
    
	@media screen and (max-width:499px)
	{
		nav li 
		{
			display: inline;
		}
}

Os códigos acima torna o layout do site ajustável, que possui larguras baseadas em percentagens e exibe uma única coluna quando o a área de exibição do navegador diminuir, permitindo que o menu caiba na barra lateral.

As Media Types definem para qual tipo de media um certo código CSS é direcionado e mantém as páginas sempre adequadas a cada tipo de display.

Abaixo é mostrado a lista de Media Types existentes e suas suas funcionalidades:

Os nomes das medias são todas case-sensitive, ou seja, letras maiúsculas e minúsculas são diferenciadas.

Nas Media Queries são utilizados três operadores lógicos: not, and e only.

not: se aplica em toda a media query e retorna verdadeiro, caso contrário retorna falso:

@media not all and (monochrome) { ... }

and: é usada para combinar múltiplas media features, bem como combinar media features com media types:

@media (min-width: 800px) { ... }

only: previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Tableless em CSS

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: css | media queries