5 dicas úteis para criar layouts responsivos
Use essas dicas para criar layouts responsivos com eficiência.
Imagine que você fez todo o trabalho duro para criar um layout realmente legal. Mas então, quando você diminui um pouco a janela do navegador, você encontra algo que está transbordando. Você lança uma consulta de mídia para corrigir o problema. Mas ao redimensionar a janela, você percebe que algo mais quebrou.
Isso é algo que a maioria dos desenvolvedores de CSS experimentará em algum momento. Mas, felizmente, temos várias soluções CSS modernas que tornam muito mais fácil desenvolver coisas e fazê-las funcionar bem. Este artigo explora 5 práticas úteis que você deve ter em mente ao desenvolver sites. Essas dicas ajudarão você a evitar interrupções irritantes em seu design.
1. Comece com uma folha de estilo global
Sempre comece com um estilo global ao escrever CSS. Não se preocupe com o layout. Em vez disso, defina estilos genéricos como tipografia, cores e planos de fundo. Redefina as margens, remova sublinhados dos links e assim por diante.
Depois de concluir o estilo geral, você poderá começar a criar o layout e direcionar elementos individuais dentro do layout. Basicamente, comece do topo e depois vá avançando nos elementos.
O exemplo CSS a seguir redefine a margem de todos os elementos para 0, define a tipografia e a cor de todos os títulos principais e adiciona uma margem consistente a todos eles:
body,
h1,
h2,
h3,
p {
margin: 0;
}
h1,
h2,
h3 {
color: blue;
font-family: "Verdana" sans-serif;
font-weight: 900;
line-height: 1;
}
h2,
h3,
p {
margin-bottom: 1rem;
}
Agora que você tem todos os estilos básicos definidos, você pode construir a partir daí. Por exemplo, você pode adicionar preenchimento ao elemento contêiner. Isso afastará o conteúdo das bordas do seu navegador. Então você pode aplicar uma largura máxima às imagens, para que elas possam se adaptar à largura do contêiner. O objetivo é começar pelos elementos gerais antes de focar nos elementos específicos.
Mais uma vez, o layout será responsivo. Assim, à medida que você altera o tamanho da tela, o tamanho dos elementos também muda de acordo. Como desenvolvedor, você deve estar ciente dessas dicas e truques de CSS, pois elas podem levar sua produtividade a um próximo nível.
2. Evite tamanhos fixos
Quando você começa a pensar em layouts, a primeira coisa que você deve ter em mente é evitar tamanhos fixos. Os tamanhos fixos referem-se a propriedades como largura: 1000px, altura: 200px e assim por diante. Definir uma altura ou largura fixa só causará problemas a longo prazo.
Em vez disso, use alturas e larguras adaptáveis. Uma maneira é usar min-height e min-width em vez de height e width. Por exemplo, suponha que você defina a largura de um elemento como 600px. Quando você for menor que 600px, o conteúdo irá transbordar:
Em vez disso, você deve alterar a propriedade de width para max-width. Com max-width, o elemento poderá encolher à medida que a janela do navegador for estreitada. E se a janela ficar larga, o texto voltará ao comprimento original. Aqui está o resultado:
Isto é o mesmo para altura. Por exemplo, suponha que você defina a altura de um cabeçalho para um valor fixo de 200px.
header {
height: 200px;
display: grid;
place-items: center;
}
Isso centraliza tudo perfeitamente no cabeçalho. Mas quando você estreita a janela do navegador, o conteúdo eventualmente flui para fora do contêiner. E isso ocorre porque você definiu uma altura fixa no cabeçalho.
Geralmente, altura e largura são propriedades perigosas. A solução é usar altura e largura adaptáveis, ou seja, min- e max-height, e min- e max-width . Nestes casos, se o navegador se deparar com situações em que o conteúdo está ficando mais longo, o cabeçalho crescerá para se adaptar a isso.
Este é um dos erros de CSS mais comuns que você deve evitar.
3. Lembre-se de que seu site é responsivo por padrão
Lembre-se de que seu site responde mesmo antes de você escrever uma única linha de código CSS. Essa mentalidade pode ajudá-lo a evitar complicar demais o processo de design. O layout funcionará em telas enormes e telas minúsculas. Pode não ser bonito. Pode até ser difícil de ler em telas grandes. Mas o site se adapta à janela de visualização, independentemente do seu tamanho.
Claro, as imagens podem transbordar e o texto pode ser muito pequeno. Mas você não perderá nada com o layout padrão. Seu texto não será quebrado e todos os elementos ficarão visíveis na tela.
Compreender e aceitar esse fato pode realmente ajudar quando você escreve seu código CSS. Ao encontrar problemas, você terá certeza de que o erro vem do CSS que você escreveu. Isso torna mais fácil encontrar o problema e corrigi-lo.
4. Use consultas de mídia para aumentar a complexidade
Tente usar consultas de mídia apenas para adicionar complexidade. Por exemplo, quando você deseja que seu layout tenha três colunas em telas maiores. Caso contrário, não os use. Para se aprofundar nas consultas de mídia, leia nosso guia de consultas de mídia.
Aqui está um cenário. Imagine que o elemento com nome de classe .split possui três elementos dentro dele. Com o seguinte CSS, um layout de três colunas será criado:
.split {
display: flex;
flex-direction: row;
gap: 2rem;
}
Em telas menores (40em de largura ou menos), você deseja que tudo ocupe uma única coluna. Então você faria isso:
@media(max-width: 40em) {
.split {
display: block;
}
}
Aqui, você está substituindo o alinhamento padrão (três colunas). Mas a consulta de mídia é desnecessária porque o navegador usa display:block por padrão. Portanto, você não precisa defini-lo explicitamente.
Com isso em mente, você poderia refatorar seu código para usar uma única consulta de mídia que se aplica somente a telas grandes. Lá você mudará para três colunas quando a tela for maior que 40em:
@media(max-width: 40em) {
.split {
display: flex;
flex-direction: row;
gap: 2rem;
}
}
Em telas pequenas, o navegador empilha tudo em uma única coluna. Mas você não precisa especificá-lo porque o navegador usa display:block por padrão. Portanto, você usou consultas de mídia apenas para adicionar complexidade.
Portanto, em vez de adicionar complexidade e ter que substituir várias propriedades, agora você está adicionando complexidade quando necessário. Na maioria das vezes, você só precisará de consultas de mídia com largura mínima. Comece primeiro com dispositivos móveis e, quando o site parecer ótimo em dispositivos móveis, adicione a complexidade (por exemplo, colunas) para a versão para desktop.
5. Aproveite as vantagens do CSS moderno
Usando abordagens CSS modernas, você pode evitar a maioria dos problemas de alinhamento e pontos de interrupção e avançar em direção à obtenção de um design intrínseco.
Uma maneira de fazer isso é:
h1 { font-size: clamp(3rem, 1rem + 10vw, 7rem)}Isso fixa o h1 entre um tamanho de fonte mínimo e máximo. O menor valor que queremos é 3rem e o maior é 7rem. O meio é o que iremos iterar (1rem + 10 vw). Como resultado, o título diminuirá automaticamente à medida que a janela de visualização ficar menor e aumentará à medida que for maior.
Saiba mais sobre CSS moderno
CSS evoluiu muito ao longo dos anos. Hoje temos abordagens mais novas e melhores para posicionar elementos em CSS. Neste artigo, abordamos algumas dessas práticas e destacamos como elas podem ajudá-lo a evitar armadilhas comuns de design. Uma das melhores maneiras de aprender CSS moderno é por meio de uma abordagem prática, como usar CSS moderno para projetar uma tabela HTML.