O design da web responsivo é uma abordagem para criar páginas da web nas quais essas páginas podem alterar dinamicamente seu layout e aparência com base no tamanho da tela do visitante. As telas grandes podem receber um layout adequado para essas telas maiores, enquanto dispositivos menores, como telefones celulares, podem receber o mesmo site formatado de maneira adequada para essa tela menor. Essa abordagem proporciona uma melhor experiência do usuário para todos os usuários e pode até ajudar a melhorar as classificações dos mecanismos de pesquisa. Uma parte importante do web design responsivo é o CSS Media Queries.
Consultas de mídia são como pequenas declarações condicionais no arquivo CSS do seu website, permitindo que você defina determinadas regras de CSS que só entrarão em vigor quando uma determinada condição for atendida, como quando o tamanho da tela está acima ou abaixo de determinados limites.
Consultas de mídia em ação
Então, como você usa consultas de mídia em um site? Aqui está um exemplo muito simples:
- Você começaria com um documento HTML bem estruturado, livre de qualquer estilo visual (é para isso que o CSS é)
- No seu arquivo CSS, você começaria como faria normalmente, estilizando a página e definindo uma linha de base para a aparência do site. Digamos que você quisesse que o tamanho da página fosse 16 pixels, você poderia escrever este CSS:
corpo {tamanho da fonte: 16px; }
- Agora, você pode querer aumentar o tamanho da fonte para telas maiores que tenham muito espaço para isso. É aqui que entram as Consultas de Mídia. Você iniciaria uma Consulta de Mídia assim:
@media screen e (min-width: 1000px) {}
- Esta é a sintaxe de uma consulta de mídia. Começa com @media para estabelecer a própria consulta de mídia. Em seguida, você define o "tipo de mídia", que neste caso é "tela". Isso se aplica a telas de computadores, tablets, telefones etc. Por fim, você encerra a Consulta de mídia com o "recurso de mídia". Em nosso exemplo acima, isso é "mid-width: 1000px". Isso significa que a Consulta de Mídia entrará em cena para exibições com uma largura mínima de 1.000 pixels de largura.
- Depois desses elementos da Consulta de Mídia, você adiciona uma chave de abertura e fechamento semelhante ao que faria em qualquer regra normal de CSS.
- A etapa final para uma Consulta de Mídia é adicionar as regras de CSS que você deseja aplicar quando essa condição for atendida. Você adiciona essas regras de CSS entre as chaves que compõem a consulta de mídia, como esta:
@media screen e (min-width: 1000px) {body {font-size: 20px; }
- Quando as condições da Consulta de mídia forem atendidas (a janela do navegador tem pelo menos 1.000 pixels de largura), esse estilo CSS entrará em vigor, alterando o tamanho da fonte do nosso site dos 16 pixels que estabelecemos originalmente para nosso novo valor de 20 pixels.
Adicionando mais estilos
Você pode colocar quantas regras de CSS nesta Consulta de mídia forem necessárias para ajustar a aparência visual de seu website. Por exemplo, se você quiser não apenas aumentar o tamanho da fonte para 20 pixels, mas também alterar a cor de todos os parágrafos para preto (# 000000), você pode adicionar:
@media screen e (min-width: 1000px) {body {font-size: 20px; } p {cor: # 000000; }}
Adicionando mais consultas de mídia
Além disso, você pode adicionar mais consultas de mídia para todos os tamanhos maiores, adicionando-os à sua folha de estilos como esta:
@media screen e (min-width: 1000px) {body {font-size: 20px; } p {cor: # 000000; {} tela @media e (min-width: 1400px) {body {font-size: 24px; }}
As primeiras consultas de mídia chegavam a 1.000 pixels de largura, alterando o tamanho da fonte para 20 pixels. Então, quando o navegador estiver acima de 1400 pixels, o tamanho da fonte mudará novamente para 24 pixels. Você pode adicionar quantas consultas de mídia forem necessárias para o seu site específico.
Min-Width e Max-Width
Geralmente, existem duas maneiras de escrever consultas de mídia usando "min-width" ou "max-width". Até agora, vimos "min-width" em ação. Isso faz com que as consultas de mídia entrem em vigor depois que um navegador atingir pelo menos essa largura mínima. Portanto, uma consulta que usa "min-width: 1000px" será aplicada quando o navegador tiver pelo menos 1.000 pixels de largura. Esse estilo de consulta de mídia é usado quando você está criando um site de maneira "mobile-first".
Se você usar "max-width", ele funcionará da maneira oposta. Uma consulta de mídia de "max-width: 1000px" será aplicada quando o navegador ficar abaixo desse tamanho.
Quanto aos navegadores mais antigos
Um desafio com o Media Queries é a falta de suporte em versões mais antigas do Internet Explorer. Felizmente, há polyfills disponíveis que podem corrigir o suporte para consultas de mídia nesses navegadores mais antigos, permitindo que você os use em sites da Web hoje, garantindo, ao mesmo tempo, que a exibição desse site não pareça quebrada em softwares de navegador mais antigos.
Editado por Jeremy Girard em 24/01/17
7
