Web design responsivo - consultas de mídia
O que é uma consulta de mídia?
A consulta de mídia é uma técnica CSS introduzida no CSS3.
Ele usa a @mediaregra para incluir um bloco de propriedades CSS somente se uma determinada condição for verdadeira.
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;
}
}
Adicionar um ponto de interrupção
Anteriormente neste tutorial, criamos uma página da Web com linhas e colunas, e ela era responsiva, mas não ficava bem em uma tela pequena.
As consultas de mídia podem ajudar com isso. Podemos adicionar um ponto de interrupção onde certas partes do design se comportarão de maneira diferente em cada lado do ponto de interrupção.
Área de Trabalho
Telefone
Use uma consulta de mídia para adicionar um ponto de interrupção em 768px:
Exemplo
Quando a tela (janela do navegador) fica menor que 768px, cada coluna deve ter uma largura de 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Sempre projete para dispositivos móveis primeiro
Mobile First significa projetar para celular antes de projetar para desktop ou qualquer outro dispositivo (isso fará com que a página seja exibida mais rapidamente em dispositivos menores).
Isso significa que devemos fazer algumas alterações em nosso CSS.
Em vez de alterar estilos quando a largura for menor que 768px, devemos alterar o design quando a largura for maior que 768px. Isso tornará nosso design Mobile First:
Exemplo
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Outro ponto de interrupção
Você pode adicionar quantos pontos de interrupção desejar.
Também vamos inserir um breakpoint entre tablets e celulares.
Área de Trabalho
Tábua
Telefone
Fazemos isso adicionando mais uma consulta de mídia (em 600px) e um conjunto de novas classes para dispositivos maiores que 600px (mas menores que 768px):
Exemplo
Observe que os dois conjuntos de classes são quase idênticos, a única diferença é o nome ( col-e col-s-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Pode parecer estranho que tenhamos dois conjuntos de classes idênticas, mas isso nos dá a oportunidade em HTML , de decidir o que acontecerá com as colunas em cada ponto de interrupção:
Exemplo HTML
Para desktop:
A primeira e a terceira seção abrangerão 3 colunas cada. A seção do meio terá 6 colunas.
Para comprimidos:
A primeira seção abrangerá 3 colunas, a segunda abrangerá 9 e a terceira seção será exibida abaixo das duas primeiras seções e abrangerá 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>
Pontos de interrupção típicos do dispositivo
Existem toneladas de telas e dispositivos com diferentes alturas e larguras, por isso é difícil criar um ponto de interrupção exato para cada dispositivo. Para manter as coisas simples, você pode segmentar cinco grupos:
Exemplo
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Orientação: Retrato / Paisagem
As consultas de mídia também podem ser usadas para alterar o layout de uma página dependendo da orientação do navegador.
Você pode ter um conjunto de propriedades CSS que só serão aplicadas quando a janela do navegador for mais larga que sua altura, a chamada orientação "Paisagem":
Exemplo
A página da web terá um fundo azul claro se a orientação estiver no modo paisagem:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Ocultar elementos com consultas de mídia
Outro uso comum de consultas de mídia é ocultar elementos em diferentes tamanhos de tela:
Exemplo
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
Alterar o tamanho da fonte com consultas de mídia
Você também pode usar consultas de mídia para alterar o tamanho da fonte de um elemento em diferentes tamanhos de tela:
Tamanho variável da fonte.
Exemplo
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Referência CSS @media
Para uma visão geral completa de todos os tipos de mídia e recursos/expressões, consulte a regra @media em nossa referência CSS .