Use essas dicas para criar layouts responsivos com eficiência.
Imagine que você fez todo o trabalho duro para criar um layout muito legal. Mas então, quando você torna a janela do navegador um pouco menor, 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 apenas desenvolver coisas e fazê-las funcionar bem. Este artigo explora 5 práticas úteis a serem lembradas 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 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 os sublinhados dos links e assim por diante.
Depois de terminar o estilo geral, você pode começar a criar o layout e direcionar elementos individuais dentro do layout. Basicamente, comece do topo e depois avance para os elementos.
O exemplo de 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:
corpo,
h1,
h2,
h3,
p {
margem: 0;
}h1,
h2,
h3 {
cor: azul;
família de fontes: "Verdana" sem serifa;
espessura da fonte: 900;
altura da linha: 1;
}
h2,
h3,
p {
margem inferior: 1rem;
}
Agora que você tem todos os estilos básicos definidos, pode construir a partir daí. Por exemplo, você pode adicionar preenchimento ao elemento container. Isso afastará o conteúdo das bordas do seu navegador. Então você pode aplicar um largura máxima às imagens, para que possam se adaptar à largura de seu contêiner. O objetivo é começar com os elementos gerais antes de direcionar os elementos específicos.
Mais uma vez, o layout será responsivo. Assim, conforme você altera o tamanho da tela, o tamanho dos elementos também muda. Como desenvolvedor, você deve estar ciente dessas dicas e truques de CSS pois eles podem levar sua produtividade para 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. Tamanhos fixos referem-se a propriedades como largura: 1000 px, altura: 200 px, e assim por diante. Definir uma altura ou largura fixa só vai causar problemas a longo prazo.
Em vez disso, use alturas e larguras adaptáveis. Uma maneira é usar altura mínima e largura mínima em vez de altura e largura. Por exemplo, suponha que você defina a largura de um elemento para 600px. Quando você for menor que 600px, o conteúdo transbordará:
Em vez disso, você deve alterar a propriedade de largura para largura máxima. Com largura máxima, o elemento poderá encolher à medida que a janela do navegador for reduzida. E se a janela ficar larga, o texto se expandirá de volta ao seu comprimento original. Aqui está o resultado:
Isso é o mesmo para altura. Por exemplo, suponha que você defina o altura de um cabeçalho para um valor fixo de 200px.
cabeçalho {
altura: 200px;
mostrar: grade;
itens de lugar: Centro;
}
Isso centraliza tudo perfeitamente no cabeçalho. Mas quando você estreita a janela do navegador, o conteúdo acabará fluindo para fora de seu contêiner. E isso ocorre porque você define uma altura fixa no cabeçalho.
Geralmente, altura e largura são ambas propriedades perigosas. A solução é usar alturas e larguras adaptáveis, ou seja, min- e altura máxima, e min- e largura máxima. Nesses 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 é responsivo mesmo antes de você escrever uma única linha de código CSS. Essa mentalidade pode ajudá-lo a evitar a complicação excessiva do 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 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 quebrará e todos os elementos ficarão visíveis na tela.
Compreender e abraçar esse fato pode realmente ajudar quando você estiver escrevendo seu código CSS. Quando você se deparar com problemas, terá certeza de que o erro vem do CSS que você escreveu. Isso torna mais fácil encontrar o problema e corrigi-lo.
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 um mergulho profundo nas consultas de mídia, leia nosso guia de consultas de mídia.
Aqui está um cenário. Imagine que o elemento com um nome de classe .dividir tem três elementos dentro dele. Com o seguinte CSS, um layout de três colunas será criado:
.dividir {
mostrar: flex;
direção flexível: linha;
brecha: 2rem;
}
Em telas menores (40em largura ou menos), você deseja que tudo ocupe uma única coluna. Então você faria isso:
@meios de comunicação(largura máxima: 40em) {
.dividir {
mostrar: bloquear;
}
}
Aqui, você está substituindo o alinhamento padrão (três colunas). Mas a consulta de mídia é desnecessária porque o navegador usa exibição: bloco por padrão. Portanto, você não precisa defini-lo explicitamente.
Com isso em mente, você pode refatorar seu código para usar uma única consulta de mídia que se aplique apenas a telas grandes. Lá você mudará para três colunas quando a tela for maior que 40em:
@meios de comunicação(largura máxima: 40em) {
.dividir {
mostrar: flex;
direção flexível: linha;
brecha: 2rem;
}
}
Em telas pequenas, o navegador empilha tudo em uma única coluna. Mas você não precisa especificá-lo porque o navegador usa exibição: bloco por padrão. Assim, você só usou consultas de mídia para adicionar complexidade.
Portanto, em vez de adicionar a complexidade e ter que substituir várias propriedades, agora você está adicionando a complexidade quando necessário. Na maioria das vezes, você só precisará largura mínima consultas de mídia. Comece com dispositivos móveis primeiro e, quando o site parecer ótimo em dispositivos móveis, adicione a complexidade (por exemplo, colunas) para a versão para desktop.
5. Aproveite o CSS moderno
Usando abordagens CSS modernas, você pode se livrar da maioria dos problemas de alinhamento e pontos de interrupção e avançar para alcançar o design intrínseco.
Uma maneira de fazer isso é:
h1 { tamanho da fonte: braçadeira (3rem, 1rem + 10vw, 7rem)}
Isso aperta o h1 entre um tamanho de fonte mínimo e máximo. O menor que queremos que ele vá é 3rem e o mais alto é 7rem. O meio é o que vamos iterar (1rem + 10 vw). Como resultado, o título encolherá automaticamente à medida que a janela de visualização diminuir e crescerá à medida que se tornar maior.
Saiba mais sobre CSS moderno
CSS evoluiu muito ao longo dos anos. Hoje temos abordagens novas e melhores para posicionar elementos em CSS. Neste artigo, abordamos algumas dessas práticas e destacamos como elas podem ajudar a evitar armadilhas comuns de design. Uma das melhores maneiras de aprender CSS moderno é por meio da abordagem prática, como usar CSS moderno para criar uma tabela HTML.