Layouts que se adaptam

A ideia de se fazer sites que se adaptam ao tamanho do monitor do usuário já existe. Esta técnica é conhecida como “Layout Fluido ou Líquido”. Quando o layout é ajustável temos que planejar o que pode e o que não pode ser alterado, senão o resultado será insatisfatório, pois o que queremos é um projeto usável, acessível e ainda sim, belo.

Esta técnica é conhecida como Layout Fluido ou Líquido, e se baseia em usar valores percentuais ao invés de absolutos para as tags que delimitam as áreas do site (div), ou seja, ao invés de declarar a largura do site com valores absolutos em pixels (px), usamos valores proporcionais em percentual (%). Desta forma o site e suas subpartes ocuparão uma área relativa ao tamanho da janela do navegador do usuário, ou a largura máxima definida pelo desenvolvedor.

Nota

Há quem diga que Layout Fluido e Líquido são técnicas distintas. Layout Fluido usaria unidades percentuais (%) e Layout Líquido unidades relativas (em). Eu não vejo desta forma. O uso de unidades relativas (em) é baseado no tamanho do corpo do texto em um determinado contexto, ou seja, é uma unidade tipográfica, por isso o site não se adaptaria ao dispositivo, mas responderia as necessidades dos usuários ao aumentar e diminuir o tamanho do corpo de texto.

No desenvolvimento de sites existem algumas variáveis que temos que considerar:

Tamanho da tela do usuário; Navegador utilizado; Se o navegador está ou não maximizado; Plugins instalados no navegador; Sistema operacional;

Ou seja, definir um padrão, um modelo, consistente de usuário é uma tarefa impossível.
Diferenças entre Fixo e Fluido
Layouts Fixos são reflexos exatos do nosso arquivo de Photoshop. As medidas dos box models são definidas e imutáveis independentemente se a unidade usada para a tipografia for em valores relativos “em” (Figura 1 - Layouts Fixos).

Layouts Fluidos são variações do nosso arquivo de Photoshop, ou seja, o layout produzido é uma base que deve prever variações em