Layout fluido
Um layout fluido é um tipo de design de página da web no qual o layout da página é redimensionado conforme o tamanho da janela muda. Isso é feito definindo as áreas da página usando porcentagens em vez de larguras fixas em pixels.
A maioria dos layouts de páginas da web inclui uma, duas ou três colunas. Nos primórdios do design da web, quando a maioria dos usuários tinha tamanhos de tela semelhantes, os desenvolvedores da web atribuíam larguras fixas às colunas. Por exemplo, um layout fixo pode incluir uma área de conteúdo principal com 960px de largura e três colunas com larguras de 180px, 600px e 180px. Embora esse layout possa ter uma boa aparência em uma tela de 1024x768, ele pode parecer pequeno em uma tela de 1920x1080 e não caber em uma tela de 800x600.
Os layouts fluidos resolvem esse problema usando porcentagens para definir cada área do layout. Por exemplo, em vez de criar uma área de conteúdo de 960px, um desenvolvedor da web pode criar um layout que preencha 80% da tela, e as três colunas podem ocupar 18%, 64% e 18%, respectivamente. Ao usar porcentagens, o conteúdo pode aumentar ou diminuir para caber na janela do computador do usuário. O CSS usado para criar um layout fixo em comparação com um layout fluido é mostrado abaixo.
| Layout fixo | Layout fluido |
|---|---|
|
.content { width: 960px; } .left, .right { width: 180px; } .middle { width: 600px; } |
.content { width: 80%; } .left, .right { width: 18%; } .middle { width: 64%; } |
As classes CSS dos exemplos poderiam ser atribuídas individualmente a uma div dentro do HTML de uma página, onde as classes .left, .right e .middle ficam dentro da classe .content. A classe de conteúdo também poderia ser atribuída a uma tabela, e as outras classes poderiam ser atribuídas às células da tabela. A classe .content de largura fixa não exige uma largura definida, pois ela abrange automaticamente a largura das divs ou células da tabela contidas nela.
Layout fluido em comparação com design responsivo
Os termos "layout fluido" e "design responsivo da web" às vezes são usados como sinônimos, mas são duas coisas diferentes. Uma página criada usando design responsivo da web inclui consultas de mídia CSS, que carregam estilos diferentes dependendo da largura da janela ou do tipo de dispositivo usado para acessar a página. O design responsivo da web exige mais CSS e, às vezes, (JavaScript) do que um layout fluido básico, mas também oferece mais controle sobre o layout da página.
Teste seus conhecimentos