By Marcos Oliveira,

Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado.

Colocando em prática, temos uma pagina em HTML 5 (pode ser HTML 4 também ou XHTML) com um link teste.css e ná pagina teste.html, teremos uma div id teste, entao queremos que quando essa página for visualizado por um Celular ou Smartphone tenha um tamanho; quando for um Tablet ou um NetBook tenha outro tamanho(maior) e quando for um PC ou uma TV tenha um novo tamanho(ainda maior), então utilizamos as Medias Queries em CSS para essa façanha, segue o arquivo teste.html e teste.css pra você entender melhor como funciona, veirifque as imagens(clique nelas para ampliar) para ver os testes que fiz diminuindo o tamanho da janela do Navegdor para verificar se realmente funciona, se a div id teste tivesse um único tamanho, o mesmo ficaria com a mesma resolução.

teste.html

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="teste.css">
        <title>Teste</title>       
    </head>       
<body>
    <div id="teste">
        Div Teste
    </div><!--TESTE-->
</body>
</html>

teste.css

@charset "utf-8";
/*teste.css*/
/* começamos com o tamanho minimo de 200 px e maximo de 250 px, infromando ter 100% dos 250px, Configurada para CELULARES E SMARTPHONES */
div#teste {
           min-width:200px;
           max-width:250px;
           min-height:500px;
           border:1px solid blue;
           background:silver;
           width:100%;
          }
/* se a tela for maior que 600 pixels, a div teste passa a ter um valor mínimo de 600 pixels e maximo de 650 pixels - tamanho para TABLETS E NETBOOKS */
@media screen and (min-width:650px){
div#teste {
           min-width:600px;
           max-width:650px;
           min-height:500px;
           width:100%;
          }
}

/* se a tela for maior que 900 pixels, a div teste passa a ter um valor mínimo de 1200 pixels - tamanho para TVs e PCs */
@media screen and (min-width:900px){
div#teste {
           min-width:1200px;
           width:100%;
          }
}

Verifique as imagens pra ver como resultará

  • Primeira Configuração para Celulares e Smartphones Utilizando Media Queries do CSS

  • Segunda Configuração para Tablets e NetBooks Utilizando Media Queries do CSS

  • Terceira Configuração para PCs e TVs Utilizando Media Queries do CSS

Verifique que usamos a propriedade __@media screen __and(operador booleano) para informar se o tamanho tiver no minimo tal, tais propriedade passarão a ter tais valores, lembrando que as Media Queries devem estar depois pois a leitura do código começa de cima e quem for definido por último passará ater o último valor.

Ok, é isso, mini-tutorial só pra saber mesmo como funciona, espero que gostem e comentem!



Sobre o Autor

Marcos Oliveira

A alegria está na luta, na tentativa, no sofrimento envolvido e não na vitória propriamente dita. A força não provém da capacidade física. Provém de uma vontade indomável.
Mahatma Gandhi


Dê você também uma Contribuição
Compartilhe nas suas Redes Sociais!




Inscreva-se no Nosso Canal do Youtube



Curso Extremamente Avançado em Shell Script Bash

Você irá descobrir técnicas avançadas de escrever em Shell Script. Como criar instaladores para distribuições Linux, Animações, Documentações, além de tudo sobre Processos em sistemas tipo UNIX, detalhes sobre Comandos Avançados e Muito Mais !




Crie Sua Própria Promoção

Customize seus Pacotes de Treinamentos obtendo descontos muito em conta!