Design de página web responsiva - Consultas de mídia

O que são consultas de mídia?

As consultas de mídia são uma tecnologia CSS introduzida no CSS3.

Usa-se apenas quando forem atendidas condições específicas @media Regras para referenciar blocos de atributos CSS.

Exemplo

Se a janela do navegador for de 600px ou menor, a cor de fundo será azul claro:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Experimente você mesmo

Adicionar pontos de interrupção

Mais cedo neste tutorial, criamos uma página da web que contém linhas e colunas, mas essa página responsiva não se parece bem na tela pequena.

As consultas de mídia podem ajudá-lo. Podemos adicionar um ponto de interrupção onde algumas partes do design se comportarão de maneira diferente em cada lado do ponto de interrupção.


Computador de mesa

Celular

Adicione um ponto de interrupção em 768px usando consultas de mídia:

Exemplo

Quando a tela (janela do navegador) for menor que 768px, a largura de cada coluna deve ser 100%:

/* Para dispositivos de desktop: */
.col-1 {largura: 8.33%;}
.col-2 {largura: 16.66%;}
.col-3 {largura: 25%;}
.col-4 {largura: 33.33%;}
.col-5 {largura: 41.66%;}
.col-6 {largura: 50%;}
.col-7 {largura: 58.33%;}
.col-8 {largura: 66.66%;}
.col-9 {largura: 75%;}
.col-10 {largura: 83.33%;}
.col-11 {largura: 91.66%;}
.col-12 {largura: 100%;}
@media only screen and (max-width: 768px) {
  /* Para smartphones: */
  [class*="col-"] {
    largura: 100%;
  }
}

Experimente você mesmo

Sempre priorize o design móvel

Primeiro móvel (Mobile First) significa que antes de projetar para desktop ou qualquer outro dispositivo, priorizamos o design para dispositivos móveis (o que fará com que a página seja exibida mais rapidamente em dispositivos menores).

Isso significa que precisamos fazer algumas melhorias no CSS.

Quando a largura for menor que 768px, devemos modificar o design em vez de alterar a largura. Assim fizemos o design 'primeiro móvel':

Exemplo

/* Para smartphones: */
[class*="col-"] {
  largura: 100%;
}
@media only screen and (min-width: 768px) {
  /* Para computadores de mesa: */
  .col-1 {largura: 8.33%;}
  .col-2 {largura: 16.66%;}
  .col-3 {largura: 25%;}
  .col-4 {largura: 33.33%;}
  .col-5 {largura: 41.66%;}
  .col-6 {largura: 50%;}
  .col-7 {largura: 58.33%;}
  .col-8 {largura: 66.66%;}
  .col-9 {largura: 75%;}
  .col-10 {largura: 83.33%;}
  .col-11 {largura: 91.66%;}
  .col-12 {largura: 100%;}
}

Experimente você mesmo

Outro ponto de interrupção

Você pode adicionar quantos pontos de interrupção quiser.

Também inseriremos um ponto de interrupção entre tablet e celular.


Computador de mesa

Tablet

Celular

Por esse motivo, adicionamos uma consulta de mídia (em 600 pixels) e adicionamos um conjunto de novas classes para dispositivos com mais de 600 pixels (mas menos de 768 pixels):

Exemplo

Observe que os dois conjuntos de classes são quase idênticos, a única diferença é o nome (col- e col-s-):

/* Para smartphones: */
[class*="col-"] {
  largura: 100%;
}
@media only screen and (min-width: 600px) {
  /* Para tablets: */
  .col-s-1 {largura: 8.33%;}
  .col-s-2 {largura: 16.66%;}
  .col-s-3 {largura: 25%;}
  .col-s-4 {largura: 33.33%;}
  .col-s-5 {largura: 41.66%;}
  .col-s-6 {largura: 50%;}
  .col-s-7 {largura: 58.33%;}
  .col-s-8 {largura: 66.66%;}
  .col-s-9 {largura: 75%;}
  .col-s-10 {largura: 83.33%;}
  .col-s-11 {largura: 91.66%;}
  .col-s-12 {largura: 100%;}
}
@media only screen and (min-width: 768px) {
  /* Para computadores de mesa: */
  .col-1 {largura: 8.33%;}
  .col-2 {largura: 16.66%;}
  .col-3 {largura: 25%;}
  .col-4 {largura: 33.33%;}
  .col-5 {largura: 41.66%;}
  .col-6 {largura: 50%;}
  .col-7 {largura: 58.33%;}
  .col-8 {largura: 66.66%;}
  .col-9 {largura: 75%;}
  .col-10 {largura: 83.33%;}
  .col-11 {largura: 91.66%;}
  .col-12 {largura: 100%;}
}

Parece estranho ter dois conjuntos de classes idênticas, mas isso nos dá a oportunidade de usar HTML para determinar o que acontece com as colunas em cada ponto de quebra:

Exemplo HTML

Para computadores de mesa:

A primeira e a terceira partes cobrirão 3 colunas. A parte central cobrirá 6 colunas.

Para tablets:

A primeira parte cobrirá 3 colunas, a segunda parte cobrirá 9 colunas, e a terceira parte será exibida abaixo das duas primeiras e cobrirá 12 colunas:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Experimente você mesmo

Pontos de ruptura típicos de dispositivos

Existem inúmeras telas e dispositivos com diferentes alturas e larguras, então é difícil criar pontos de ruptura precisos para cada dispositivo. Para simplificar, você pode focar em esses cinco grupos:

Exemplo

/* Dispositivos ultra-pequenos (telefones, 600px ou menos) */
@media only screen and (max-width: 600px) {...} 
/* Dispositivos pequenos (tablets em retrato e grandes celulares, 600 pixels ou mais) */
@media only screen and (min-width: 600px) {...} 
/* Dispositivos medianos (tablets em paisagem, 768 pixels ou mais) */
@media only screen and (min-width: 768px) {...} 
/* Dispositivos grandes (laptops e computadores de mesa, 992px ou mais) */
@media only screen and (min-width: 992px) {...} 
/* Dispositivos ultra-grandes (laptops e computadores de mesa, 1200px ou mais) */
@media only screen and (min-width: 1200px) {...}

Experimente você mesmo

Orientação: Retrato / Paisagem

As consultas de mídia também podem ser usadas para alterar a disposição da página com base na orientação do navegador.

Você pode definir um conjunto de atributos CSS que só se aplicam quando a largura da janela do navegador é maior que sua altura, ou seja, a direção 'paisagem':

Exemplo

Se a orientação for modo paisagem, a cor de fundo da página será azul claro:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Experimente você mesmo

Ocultar elementos com a consulta de mídia

Outra utilização comum da consulta de mídia é ocultar elementos em diferentes tamanhos de tela:

Exemplo

/* Se o tamanho da tela for 600 pixels ou menor, oculte esse elemento */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Experimente você mesmo

Modificação da fonte com a consulta de mídia

Você também pode usar consultas de mídia para alterar o tamanho da fonte dos elementos em diferentes tamanhos de tela:

Exemplo

/* Se o tamanho da tela for 601px ou maior, configure o font-size do <div> para 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* Se o tamanho da tela for 600px ou menor, defina o font-size do <div> como 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Experimente você mesmo

Manual de referência @media CSS

Para uma descrição completa de todos os tipos de mídia e características/expressões, por favor, consulte Ver @media regra no manual de referência CSS.