Porcentagem ou pixel para layouts?

O que você usará para um layout de página da web? Porcentagem ou pixels?
Quando um deve usar um sobre o outro?

web-development design websites

— ACP
fonte

Não use -; use em 's ;-) #

— Armand

(Que é "em" o termo tipográfico, não "em" a tag HTML, em qualquer pessoa Boggles caso.)

— Frank Shearar

@ Alison: você não quer dizer "Nem - use em s"?

— Alan Pearce

Plataforma alvo? O óbvio seria percentual, mas, infelizmente, como a maioria de seus ativos gráficos não escala bem eu recomendaria pixels

— dvhh

Hmmmm @Alan você pode estar certo :-)

— Armand

Respostas:

A unidade que você usa depende inteiramente do que você deseja realizar. As unidades mais usadas nos layouts da web são:

px - absoluto; um pixel
pt - absoluto; 1/72 polegadas, cerca de 1,3px para mídia de tela
em - relativo ao tamanho da fonte pai; 1.0em = tamanho de um caractere (largura de M maiúsculo)
% - em relação ao pai

Você usa px para tamanhos que permanecem constantes, por exemplo, uma borda de 1 px.
Você usa em para tamanhos que devem seguir o tamanho da fonte, por exemplo, uma margem 3.0em.
Você usa% para tamanhos que devem ocupar uma porcentagem do pai, por exemplo uma largura de 50%.

Para layouts de páginas da Web, você normalmente usa pixels ou porcentagens, dependendo se deseja um layout fixo (pixel) ou um layout fluido (percentual).

— Guffa
fonte

Um pouco mais difícil de escolher: um em é a largura, e não a altura, de um M maiúsculo na tipografia tradicional. Não é de surpreender que um en seja a largura de um N. maiúsculo. Um ex é a medida de altura baseada em caracteres.

— Stan Rogers

@ Stan Rogers: Eu nunca disse que era a altura de um M maiúsculo, alguém o editou.

— Guffa

O que importa é que as informações fornecidas sejam as mais corretas possíveis, e não quem as colocou lá. (Eu não posso editar não-wiki de outras pessoas responde ainda, então os comentários são o melhor que posso fazer.)

— Stan Rogers

O Tamanho do ponto não é absoluto, a menos que você saiba a resolução exata do dispositivo de saída e o fator de escala que o usuário definiu (interface do usuário independente da resolução, 'fontes grandes' do XP, etc.). Além disso, o iPhone 4 é 326 dpi, que é consideravelmente mais do que 72dpi

— JBRWilkinson

@JBRWilkinson: É uma medida absoluta para qualquer dispositivo. É tão absoluto quanto a unidade px; o tamanho de um pixel também difere para qualquer exibição.

— Guffa

Costumo usar pixels para declarações de largura (que geralmente são fixas), mas em para altura. Dessa forma, o layout é redimensionado verticalmente - mas mantém a consistência horizontal.

— sunwukung
fonte

Eu uso tamanhos relativos / proporcionais sempre que possível. Acho que torna muito mais fácil fazer alterações nos layouts posteriormente. Além disso, o uso de um tamanho relativo a um elemento pai significa que uma alteração no pai facilmente ocorre.

Tradicionalmente, o uso de tamanhos relativos também permitia que as páginas parecessem corretas em várias resoluções e era especialmente benéfico para o zoom do navegador ou tamanhos mínimos de fonte. Mas os navegadores modernos agora lidam com o redimensionamento extremamente bem com layouts específicos para pixels, ampliando as imagens conforme necessário. Portanto, tornou-se menos importante usar tamanhos relativos.

— Matt S
fonte