Faça um layout CSS sobreviver ao conteúdo real

Quatro coleções de explicações CSS para entender as restrições de layout, dimensionamento resiliente e os casos estranhos que uma maquete perfeita pode esconder.

Um layout não está concluído quando corresponde a uma captura de ecrã. O verdadeiro teste chega com um título mais longo, menos cartões, uma ecrã estreita ou uma fonte diferente. Esses escritores explicam CSS por meio de exemplos e raciocínio visual. Use-os para investigar uma restrição que o leitor pode reproduzir em vez de coletar declarações sem entender o que elas mudam.

Tente isso primeiro

Crie um pequeno exemplo com um título curto, um título longo e uma string contínua. Redimensione-o antes de alterar o CSS. Escolha um artigo que explique a falha, aplique a menor ideia relevante e teste novamente com imagens faltantes e texto ampliado. Faça anotações sobre a restrição para que a próxima correção não a desfaça.

Lembre-se

Os exemplos de um artigo podem ter como alvo uma linha de base de navegador diferente. Verifique o suporte para o recurso específico e mantenha um substituto apropriado. Um trecho de código compacto não é automaticamente mais resiliente do que uma regra de layout mais longa e clara.