Detecte as dimensões do navegador com CSS3

Quando começamos diretamente no mundo de design responsivo é importante saber quais são as novas regras de CSS3, isso nos ajuda a detectar as dimensões da tela em que o site ou aplicativo está sendo visualizado.
Uma dessas regras é @metade, que com a combinação adequada de condições nos permite saber o tamanho da tela como tal e, em função do resultado, tomar as devidas providências quanto ao seu desenho.

Usando consultas de mídia

Vamos criar um código HTML simples e aí vamos incluir nossa folha de estilo, que conterá as regras para o nosso quer dizer, vamos ver:

 Detectar dimensões da tela 

Como podemos ver, é um código bastante simples, no entanto, há vários itens a serem destacados. O primeiro está incluído nas etiquetas estilo, aí temos duas regras, a primeira indica que a partir de 600 pixels a cor de fundo do nosso texto no rótulo h1 Ele mudará para azul, vamos ver quando redimensionamos no navegador e essa mudança entra em vigor:

A segunda regra indica que se a largura máxima for 400 pixels a cor de fundo do texto mudará para vermelho, o que indica uma terceira condição, já que tudo abaixo de 400 pixels será vermelho e acima de 600 será azul, então de 401 a 599 pixels manterá a cor branca por padrão, vejamos:

Por fim, se diminuirmos muito mais a tela de nosso navegador, entraremos na regra para nossa cor de fundo vermelha, vamos ver como fica:

Vemos então que detectar as dimensões do nosso navegador é uma tarefa extremamente simples, graças ao CSS3, algo que é extremamente útil quando estamos trabalhando com designs responsivos e precisamos saber as dimensões do navegador do usuário para aplicar estilos que fazem nosso site ter uma boa aparência em qualquer dispositivo e resolução de tela existente.