Magalhães Publicidades

Magalhães nas Redes Sociais

Compartilhe ideias em nossos canais de relacionamento.
[email protected]
(11) 4252-2139
Seg. à Sex. das 09h às 18h

Siga-nos:

Ligue! (11) 3458-3191

 

O que são Media Queries e Como utilizá-las?

O que são Media Queries e Como utilizá-las?

A cada dia encontramos dispositivos móveis em lançamento, são diversos modelos com tamanhos e hardwares semelhantes ao computador Desktop. Atualmente criar um site em HTML configurado apenas para dispositivos maiores como Desktop não é viável, pois cada dispositivo necessita de um formato de abertura diferente. Para isso utilizamos as Medias Queries.

O que são as Medias Queries?

As Medias Queries são condições que podem ser criadas e organizadas para cada tipo de tela. Então, se as condições de tela forem aprovadas em conjunto com as regras criadas, toda a estrutura será adaptada para que o conteúdo abra de acordo com o dispositivo em uso.

Como usar as Medias Queries?

Antes de começar a aprender mais sobre as Media Queries lhe darei um conselho:

Siga todos os passos de nossa aula em conjunto com as ferramentas sugeridas, garanto que aprenderá muito praticando!

Incluir um estilo CSS dentro de uma página HTML é simples, e para usar Media Queries podemos trabalhar tanto com estilos internos quanto externos. E para trabalhar com os estilos é necessário defini-los dentro da tag HEAD do HTML:

<link rel="stylesheet" type="text/css" href="estilo.css" media="print">

Media Type

No código acima há um atributo nomeado media com o valor print, essa parte do código é chamada de Media Type e neste caso a Media Type está informando que o estilo vinculado ao HTML terá como função a abertura da página para impressão, resumindo, estamos configurando um estilo de impressão para nossa página Html.   Há diversos tipos de Media Types:

  • all: este valor é para que a estrutura de seu site, todo o conteúdo abra em qualquer dispositivo;
  • print: para impressão em pape;
  • embossed: para dispositivos que efetuam impressão em Braille;
  • braille: para dispositivos táteis;
  • screen: para dispositivos de alta resolução com telas coloridas;
  • handheld: para dispositivos de mão, celulares e outros da mesma categoria de telas pequenas;
  • projection: para apresentações, como no PowerPoint;
  • speech: para sintetizadores de voz;
  • tty: para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo teletypes e terminais;
  • tv: para dispositivos como televisores, com baixa resolução, com boa quantidade de cores e scroll limitado.

Para alguns dispositivos o Media Type não se encaixa bem, por exemplo, usar “Handheld” para um Iphone, portanto podemos adaptar da seguinte forma:

<link rel="stylesheet" type="text/css" href="estilo.css" media="screen and (max-width: 480px)">

No código acima definimos que o estilo será aberto com a configuração “screen” para abertura em dispositivos de alta qualidade com cores, e com largura máxima de 480px. Você pode estar se perguntando, e se eu quiser definir um estilo para cada dispositivo? Simples, crie um estilo para cada dimensão, claro, sempre verificando as características de cada dispositivo, pois no código acima definimos a característica de largura máxima, veja abaixo mais algumas características que pode utilizar:

  • width
  • height
  • orientation
  • device-width
  • device-height
  • aspect-ratio
  • resolution
  • scan
  • grid
  • device-aspect-ratio
  • color
  • color-index
  • monochrome

Seja organizado

O ideal é sempre organizar seus códigos por arquivos e indentações, ou seja, sua organização poderá facilitar tanto para suas futuras alterações quanto para outros desenvolvedores, caso a manutenção do site seja efetuada por outra pessoa. Então, veja como separar as Media Queries por estilos diferentes:

<link rel="stylesheet" type="text/css" href="estilo.css">

Perceba que não inserimos o atributo “media” no código acima, apenas estamos ligando a página HTML com o estilo CSS. Agora veja dentro da página de estilo:

estilo.css

/*Dispositivos pequenos com largura máxima de 480px*/
@media screen and (max-width: 480px){
.bloco-pai{width: 100%; height: 400px; background-color: #ccc;}
}

Perceba que utilizamos o atributo @media e logo em seguida as características. Também quero ressaltar aqui sobre os símbolos de chaves {}, veja que primeiro abrimos as chaves da Media Querie, e dentro da Media Querie adicionamos atributos e valores para a estrutura de tela desejada. Vou detalhar o código abaixo:

@media screen and (max-width: 480px){

Aqui abrimos a Media Querie, informamos que a tela será de alta qualidade e colorida, com largura máxima de 480px, logo abrimos a chave para informar qual será a configuração para este tipo de tela;

.bloco-pai{width: 100%; height: 400px; background-color: #ccc;}

Aqui uma classe criada no HTML chamada “bloco-pai” receberá largura de 100%, altura de 400px, e cor de fundo cinza (#ccc).

}

Agora sim, fechamos a Media Querie. Vamos criar um estilo para cada tamanho de tela:

/*De 0 até 480px*/
@media screen and (max-width: 480px){
.bloco-pai{width: 100%; height: 400px; background-color: #ccc;}
}
/*De 481px até 767px*/
@media screen and (min-width: 481px){
.bloco-pai{width: 100%; height: 400px; background-color: #666;}
}
/*De 768px até 1199px*/
@media screen and (min-width: 768px){
.bloco-pai{width: 100%; height: 400px; background-color: #ff0000;}
}
/*Igual ou acima de 1200px*/
@media screen and (min-width: 1200px){
.bloco-pai{width: 100%; height: 400px; background-color: #000; color: #fff;}
}

Quer ser ainda mais organizado? Crie uma folha de estilo para cada dispositivo separando folha por folha. Defina antes de tudo quantos tamanhos de tela utilizará, logo em seguida crie cada folha, por exemplo:

 

  • estilo-pequeno.css
  • estilo-pre-medio.css
  • estilo-medio.css
  • estilo-grande.css

 

Na tag HEAD do seu HTML faça referência dos 4(quatro) documentos:

<link rel="stylecheet" type="text/css" href="estilo-pequeno.css">
<link rel="stylecheet" type="text/css" href="estilo-pre-medio.css">
<link rel="stylecheet" type="text/css" href="estilo-meio.css">
<link rel="stylecheet" type="text/css" href="estilo-grande.css">

Dentro de cada folha de estilo insira uma Media Queria:

estilo-pequeno.css

/*De 0 até 480px*/
@media screen and (max-width: 480px){
.bloco-pai{width: 100%; height: 400px; background-color: #ccc;}
}

estilo-pre-medio.css

/*De 481px até 767px*/
@media screen and (min-width: 481px){
.bloco-pai{width: 100%; height: 400px; background-color: #666;}
}

estilo-medio.css

/*De 768px até 1199px*/
@media screen and (min-width: 768px){
.bloco-pai{width: 100%; height: 400px; background-color: #ff0000;}
}

estilo-grande.css

/*Igual ou acima de 1200px*/
@media screen and (min-width: 1200px){
.bloco-pai{width: 100%; height: 400px; background-color: #000; color: #fff;}
}

Faça testes, aumente e diminua a largura do seu navegador, assim poderá ver a diferença cores em cada resolução.

Há extensões no navegador Google Chrome que lhe ajudam para ver a diferença em cada dispositivo, como o Resize Window. E então utilize dos conhecimentos adquiridos para efetuar testes diferentes utilizando as Media Queries, seja criativo.

 

Acredite em você! Obrigado por chegar até aqui…Ahh… vou deixando abaixo o link dos arquivos utilizados, assim poderá comparar.

David Magalhães

Fundador e CEO da Magalhães Publicidades, diversos conhecimentos em Marketing Digital, foi Instrutor de matérias do ramo durante anos, e apaixonado por lecionar online para diversos públicos.

No Comments

Post a Comment