Como deixar um site responsivo

Um site responsivo é aquele que consegue se adaptar a diferentes tamanhos de tela, como computador, tablet e celular.

Um site que fica bonito no computador, mas quebra ou fica difícil de usar no celular, não é responsivo.

1. Configure o HTML

Primeiro, coloque esta linha dentro do <head> do seu HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ela ajuda o navegador a adaptar a página à largura do dispositivo.

Um exemplo:

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Meu Site</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <h1>Meu site responsivo</h1>

</body>

</html>

2. Evite larguras fixas

Um erro comum é fazer:

.container {
    width: 1000px;
}

Em uma tela de celular, 1000 pixels é muito grande.

Prefira:

.container {
    width: 100%;
    max-width: 1000px;
}

Assim, o elemento pode diminuir em telas menores, mas não ficará maior que 1000 pixels.

3. Use porcentagens e unidades flexíveis

Em vez de colocar tudo em pixels, você pode utilizar:

width: 100%;
max-width: 1200px;
padding: 20px;

Também existem unidades como:

% → porcentagem
rem → tamanho relativo à fonte
vw → largura da tela
vh → altura da tela

4. Use Flexbox

O Flexbox é muito importante para criar layouts responsivos.

Exemplo:

.produtos {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

O flex-wrap: wrap permite que os elementos passem para a próxima linha quando não houver espaço.

Por exemplo:

COMPUTADOR

[ Produto ] [ Produto ] [ Produto ]


CELULAR

[ Produto ]
[ Produto ]
[ Produto ]

5. Use Media Queries

As media queries permitem mudar o CSS dependendo do tamanho da tela.

Exemplo:

@media (max-width: 600px) {

    h1 {
        font-size: 28px;
    }

    .produtos {
        flex-direction: column;
    }

}

Nesse caso, quando a tela tiver até 600 pixels, o layout será alterado.

6. Faça imagens se adaptarem

Uma imagem muito grande pode ultrapassar a tela do celular.

Use:

img {
    max-width: 100%;
    height: auto;
}

Assim, a imagem poderá diminuir conforme o espaço disponível.