CSS: aplique responsividade usando media queries

Imagens e medidas flexíveis - Apresentação

Olá! Me chamo Neilton Seguins, sou instrutor na escola de front-end.

Audiodescrição: Neilton se declara como um homem de pele negra, com olhos e cabelos escuros. Usa óculos com armação retangular e, no momento, veste uma camisa amarela lisa. Ao fundo, uma parede com uma iluminação roxa e azul.

É fascinante observar como as aplicações web se adaptam a diferentes dispositivos. Por exemplo, uma página acessada pelo celular se ajusta perfeitamente à tela do smartphone. Essa capacidade de adaptação é um aspecto fundamental que merece nossa atenção e exploração.

O que aprenderemos?

A nossa tarefa consiste em adicionar responsividade à aplicação da Alura Start. Como pessoas desenvolvedoaes, ao abrirmos o navegador no endereço 127.0.0.1:5500/index.html e pressionarmos a tecla "F12" para inspecionar, notamos que, ao diminuir o tamanho da tela da aplicação arrastando a do inspecionar, alguns elementos ultrapassam os limites visuais.

Isso nos indica que a aplicação não está adaptada para telas que não sejam de desktop, e é exatamente isso que precisamos corrigir.

O resultado final que buscamos é a aplicação da Alura Start, agora com responsividade. Ao pressionarmos "F12" e reduzirmos a tela, observamos que ela se adapta, apresentando um design ajustado mesmo em resoluções pequenas.

Durante este processo, aprenderemos sobre layout fluido, medidas flexíveis e breakpoints, que são os pontos em que a aplicação se ajusta. Vamos trabalhar com media queries, explorando a fundo esse recurso, utilizando operadores, media types e media queries alinhadas. Também teremos a oportunidade de conhecer novas técnicas para criar animações com CSS, adicionando fluidas transições à nossa aplicação.

Pré-requisitos

Se você está se perguntando o que é necessário para continuar conosco, o essencial é ter um conhecimento básico de HTML e CSS. O restante iremos desenvolver juntos.

Agora, é hora de começar a codar!

Imagens e medidas flexíveis - Medidas relativas

Atualmente, é bastante comum o acesso à internet por meio de celulares e dispositivos móveis, como smartphones e tablets. Esses aparelhos, devido ao seu tamanho compacto e à conveniência de estarem sempre disponíveis, permitem que os utilizemos em diversas situações e locais.

Entendendo a demanda

Agora, vamos explorar a nossa aplicação. No navegador Chrome no endereço 127.0.0.1:5500/index.html. Ao pressionar a tecla "F12", abrimos o painel de inspeção à direita. Clicamos na aba do inspecionar e a arrastamos para a esquerda, ampliando seu tamanho. Ao fazer isso, observamos que a nossa aplicação, a partir de um certo ponto, pode ficar desposicionada.

Alguns elementos acabam se estendendo além das bordas da tela, resultando em um desalinhamento. Isso indica que a nossa aplicação não está responsiva para tamanhos de tela menores que um determinado limite.

Para pessoas usuárias de dispositivos móveis, como celulares, essa falta de responsividade pode dificultar a utilização da aplicação, uma vez que ela não será exibida corretamente nas telas desses dispositivos.

Implementando a responsividade

Para implementar responsividade em nosso site, retornamos ao Visual Studio Code e abrimos o arquivo estilos.css. Neste arquivo, notamos que várias partes do código CSS estão prontas; essencialmente, a estrutura da nossa aplicação está definida. A falta de responsividade é o único obstáculo que precisamos superar.

Além disso, utilizamos algumas variáveis CSS para gerenciar espaçamentos, como padding e gap, ajustando-as para diferentes tamanhos.

Convertendo unidades de medida fixas para relativas

A primeira ação consiste em alterar os valores de padding e gap, que atualmente estão em pixels, para uma unidade relativa, utilizando rem. Na linha 21, no padding-2xs: 8px, o valor será modificado para 0.5rem, uma medida relativa. Onde está definido 14 pixels, faremos a alteração para 0.875rem. O padding-s, na linha 23, que anteriormente era 16 pixels, passará a ser 1rem.

Essas mudanças permitirão que a aplicação se adapte melhor a diferentes tamanhos de tela.

No padding-m, que era 24 pixels, o novo valor será 1.5rem. Onde antes tínhamos 32 pixels, agora será ajustado para 2rem. O valor de 48 pixels, na linha 26, será modificado para 3rem, e na linha 27, no padding-2xl, utilizaremos 4rem.

estilo.css

/* código omitido */

--padding-2xs: 0.5rem;
--padding-xs: 0.875rem;
--padding-s: 1rem;
--padding-m: 1.5rem;
--padding-l: 2rem;
--padding-xl: 3rem;
--padding-2xl: 4rem;

/* código omitido */

Para o gap-xs, na linha 29, o valor será alterado para 0.5rem. Onde estava definido 16 pixels, o gap-s, na linha 30, agora será 1rem. O valor de 24 pixels será ajustado para 1.5rem, e o que era 32 pixels passará a ser 2rem. Para o valor de 48 pixels, faremos a alteração para 3rem, e, por fim, na linha 34, onde tínhamos 64 pixels, será modificado para 4rem.

/* código omitido */

--gap-xs: 0.5rem;
--gap-s: 1rem;
--gap-m: 1.5rem;
--gap-l: 2rem;
--gap-xl: 3rem;
--gap-2xl: 4rem;

/* código omitido */

Essas adaptações garantirão uma responsividade adequada em diferentes dispositivos.

Após salvar com "Ctrl + S" a aplicação e voltar ao navegador, notamos que basicamente nada mudou em relação ao tamanho. Apenas mudamos de unidade de medida fixa, que era pixels, para a unidade de medida relativa, utilizando o rem.

Ajustando os valores do font-size

Outra coisa que notamos é que em alguns pontos da aplicação estamos utilizando a propriedade font-size com o valor de 60 pixels. Ainda estamos utilizando pixels em nossas unidades.

Vamos corrigir isso criando variáveis para o font-size. Na linha 6, abaixo de fontes, definiremos as variáveis. Escreveremos um comentário para editar a tipografia. Definiremos as variáveis:

/* código omitido */

/* Tipografia */

--font-size-xl: 3.75rem;
--font-size-l: 2rem;
--font-size-m: 1.25rem;
--font-size-b: 1rem; // b de base
--font-size-s: 0.75rem;

/* código omitido */

Analisaremos o código em busca das instâncias de font-size para substituí-las pelos valores apropriados. Utilizando o atalho "Ctrl + F", abrimos a caixa de pesquisa no Visual Studio Code e digitamos "font-size" para localizar todas as ocorrências. Na linha 50, encontramos o valor 60px, que será trocado por var(--fonte-size-xl), representando o maior tamanho de fonte.

/* código omitido */

h5 {
    font-family: var(--fonte-titulos);
    font-size: var(--fonte-size-xl);
    font-weight: 700;
}

/* código omitido */

Em seguida, localizamos o próximo valor, 16px, que será substituído por var(--fonte-size-b), a fonte base do projeto.

/* código omitido */

.cabecalho__item > a {
    font-size: var(--fonte-size-b);

/* código omitido */

Para o valor de 12px, encontrado no cabeçalho, utilizamos var(--fonte-size-s), correspondente ao menor tamanho.

/* código omitido */

.cabecalho__botoes > a {
    font-size: var(--fonte-size-s);
}

/* código omitido */

O próximo está no bnt:

/* código omitido */

bnt {
    /* código omitido */

    font-size: var(--fonte-size-b);
}

/* código omitido */

No caso de 20px, optamos por var(--font-size-m).

/* código omitido */

.banner__descricao {
     color: var (--cor-texto);
    font-size: var(--fonte-size-m);
}

/* código omitido */

Para garantir que as substituições estão corretas, verificamos as variáveis subindo um pouco no código; confirmamos que font-size-m é definido como 1.25rem, o que equivale a 20px.

Continuaremos esse processo de substituição para todos os valores de font-size no código:

/* código omitido */

& > h3 {
    font-size: var(--fonte-size-m);
        
        /* código omitido */
}

/* código omitido */

O próximo font-size está no & > p:

/* código omitido */

& > p {
     color: var(--cor-texto);
    font-size: var(--fonte-size-m);
}

/* código omitido */

Clicamos na caixa de seleção para ajustar o próximo font-size de 32px:

/* código omitido */

& > div > h3 {
    font-size: var(--fonte-size-l);
        
        /* código omitido */
}

/* código omitido */

No próximo temos o valor de 20px e substituímos por var(--fonte-size-m):

/* código omitido */

    & > h3 {
        /* código omitido */

            font-size: var(--fonte-size-m);
    }
}

/* código omitido */

O instrutor irá alterar todos os tamanhos de fonte do arquivo. Por favor, realize a mesma alteração em seu código.

Após substituir todos os font-size, voltamos ao navegador. A aplicação praticamente não mudou, mas percebemos um aumento em algumas fontes. Ao alterar apenas algumas medidas relativas, o projeto já muda um pouco de aparência.

Importância das medidas relativas em design responsivo

Utilizar medidas relativas em vez de fixas é fundamental para a adaptabilidade de nossos projetos. Quando optamos por medidas fixas, como 20px, o valor permanecerá sempre 20px, independentemente do tamanho da tela. Em contrapartida, ao adotarmos medidas relativas, como rem, o valor se torna dependente da fonte raiz do projeto, ou seja, do root.

Por padrão, documentos HTML têm um valor de 16px como raiz, o que significa que 1rem equivale a 16px, 2rem equivale a 32px, e assim por diante. Para converter pixels para rem, basta dividir o valor em pixels por 16.

O uso de unidades relativas nos permite criar layouts fluidos que se adaptam a diferentes resoluções. Em dispositivos menores, ao realizar zoom, as fontes e os espaçamentos se ajustam automaticamente, proporcionando uma experiência de pessoa usuária mais coesa. Portanto, a escolha por medidas relativas é essencial para a eficácia e a responsividade de nossos projetos.

Próximo passo

Demos o primeiro passo para adicionar responsividade à aplicação, mas ainda há muito a ser feito. É importante que continuemos a trabalhar nessa direção de forma sequencial.

Imagens e medidas flexíveis - Breakpoints

Estamos utilizando medidas relativas, como a conversão de todas as medidas de pixels para rem.

Explorando a responsividade da aplicação

Agora, é essencial compreendermos em que momento nossa aplicação perde a adequação do layout e começa a apresentar quebras. Para isso, acessaremos o navegador e abriremos a ferramenta de inspeção pressionando a tecla "F12".

Em seguida, ajustaremos o tamanho da aba de inspeção, ampliando-a, enquanto diminuímos a tela da aplicação. Essa abordagem nos permitirá observar como as alterações afetam o layout em diferentes dimensões de tela.

Observamos que, ao reduzir a largura da tela para abaixo de 1200 pixels, a aplicação já apresenta desalinhamentos, com o surgimento de uma barra de rolagem horizontal. Se diminuirmos ainda mais a largura, a situação se agrava, resultando em diversos elementos desalinhados e conteúdo que ultrapassa o espaço disponível.

Há muito trabalho a ser realizado, e a nossa primeira ação será focar na classe container.

Analisando a classe container

No Visual Studio Code, observamos a classe container, que é utilizada para centralizar o conteúdo dentro do espaço útil.

estilos.css

/* código omitido */

.container {
    width: 1192px;
    margin: 0 auto;
}

/* código omitido */

No navegador, notamos que as margens estão contribuindo para essa centralização. Agora, precisamos tornar essa classe container responsiva, garantindo que o conteúdo se ajuste de maneira adequada à resolução da tela.

Testando a responsividade da aplicação em diferentes dispositivos

Para avaliar a responsividade da aplicação em outros dispositivos, utilizamos o atalho "Ctrl + Shift + M". Esse comando abrirá a visualização de responsividade no Chrome DevTools, que inclui uma biblioteca de dispositivos. No momento, a visualização está configurada como responsiva, mas é possível selecionar uma variedade de dispositivos, como iPhone SE, iPhone XR, iPhone 12 Pro, entre outros.

Ao realizar esses testes, notamos que a aplicação não apresenta responsividade adequada em nenhum desses dispositivos, funcionando corretamente apenas na versão web para desktop.

Resolvendo os problemas de responsividade

Para abordar esses problemas, no Visual Studio Code, localizaremos a classe container e criaremos uma nova regra. Na linha 63, após a classe container, definiremos uma regra @media(), abrindo e fechando parênteses, e dentro deles inseriremos max-width: 768px. Em seguida, abriremos e fecharemos chaves para adicionar alguns estilos dentro dessa regra, como width: 674px.

/* código omitido */

    @media(max-width: 768px) {
        width: 674px
    }
}

/* código omitido */

Após salvar o arquivo, retornaremos ao navegador para verificar as mudanças e avaliar a responsividade da aplicação.

Observando as alterações na responsividade da aplicação

Ao diminuir a tela do dispositivo arrastando a aba do inspecionar para a esquerda, já podemos perceber mudanças na aplicação. Isso se torna ainda mais evidente ao selecionar o modo responsivo na parte superior direita, que é iniciado em uma resolução de 768px, indicada por uma barra azul. Agora, temos um container adaptado para essa resolução.

O valor de 768px não é aleatório; estudos demonstram que muitos dispositivos móveis, tablets e smartphones têm resoluções comuns, como 768px, 320px, 375px e até laptops com 1024px. Esses valores são conhecidos como breakpoints, ou pontos de quebra, que marcam os momentos em que a aplicação deixa de ter um layout adequado e os elementos se tornam desalinhados. Por essa razão, escolhemos trabalhar com o valor de 768px.

Ao revisitar a resolução de 768px, observamos que o container está respeitando essa dimensão, mas ainda há elementos que ultrapassam o valor estabelecido.

Próximo passo

Precisamos realizar ajustes adicionais para garantir que todas as partes do conteúdo se adaptem adequadamente a essa largura. No próximo vídeo, aprofundaremos nosso entendimento sobre como implementar essas mudanças. Até lá!

Sobre o curso CSS: aplique responsividade usando media queries

O curso CSS: aplique responsividade usando media queries possui 100 minutos de vídeos, em um total de 51 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Imagens e medidas flexíveis
• Criando um layout fluido
• Mergulhando em media queries
• Dispositivos mobile
• Animações e deploy