¿Porcentaje o píxel para diseños?

¿Qué usarás para el diseño de una página web? Porcentaje o píxeles?
¿Cuándo se debe usar uno sobre el otro?

web-development design websites

— ACP
fuente

Ninguno de los dos: use em 's ;-)

— Armand

(Ese es "em", el término tipográfico, no "em", la etiqueta HTML, en caso de que alguien se moleste).

— Frank Shearar,

@Alison: ¿No quieres decir "Ni - uso em s"?

— Alan Pearce

Plataforma de destino? Lo obvio sería el porcentaje, pero desafortunadamente como la mayoría de sus recursos gráficos no se escalan bien, recomendaría píxeles

— dvhh

Hmmmm @Alan puede que tengas razón :—)

— Armand

Respuestas:

La unidad que usa depende completamente de lo que desea lograr. Las unidades más utilizadas en diseños web son:

px - absoluto; un píxel
pt - absoluto; 1/72 de pulgada, aproximadamente 1.3 px para medios de pantalla
em: relativo al tamaño de fuente principal; 1.0em = tamaño de un carácter (ancho de M mayúscula)
% - relativo al padre

Utiliza px para tamaños que permanecen constantes, por ejemplo, un borde de 1px.
Utiliza em para tamaños que deben seguir el tamaño de fuente, por ejemplo, un margen de 3.0em.
Utiliza% para los tamaños que deberían ocupar un porcentaje del padre, por ejemplo, un ancho del 50%.

Para los diseños de página web, normalmente utiliza píxeles o porcentajes dependiendo de si desea un diseño fijo (píxel) o un diseño basado en fluidos (porcentaje).

— Guffa
fuente

Un poco para elegir: un em es el ancho, no la altura, de una M mayúscula en la tipografía tradicional. No es sorprendente que un en sea el ancho de una mayúscula N. Un ex es la medida de altura basada en caracteres.

— Stan Rogers

@Stan Rogers: Nunca dije que era la altura de una

— letra

Lo que importa es que la información dada es tan correcta como podemos hacerlo, no quién la puso allí. (Todavía no puedo editar las respuestas que no son wiki de otras personas, por lo que los comentarios son lo mejor que puedo hacer)

— Stan Rogers,

El tamaño de punto no es absoluto a menos que conozca la resolución exacta del dispositivo de salida y el factor de escala que el usuario ha establecido (IU independiente de la resolución, 'fuentes grandes' de XP, etc.). Además, el iPhone 4 es de 326 ppp, que es considerablemente más de

— 72 ppp

@JBRWilkinson: es una medida absoluta para cualquier dispositivo dado. Es tan absoluto como la unidad px; El tamaño de un píxel también difiere para cualquier pantalla.

— Guffa

Tiendo a usar píxeles para declaraciones de ancho (que generalmente son fijos), pero em para altura. De esa forma, el diseño cambia de tamaño verticalmente, pero mantiene la consistencia horizontal.

— sunwukung
fuente

Yo uso tamaños relativos / proporcionales siempre que sea posible. Creo que es mucho más fácil hacer cambios en los diseños más adelante. Además, el uso de un tamaño relativo a un elemento primario significa que un cambio en el elemento primario se filtra fácilmente.

Tradicionalmente, el uso de tamaños relativos también permitía que las páginas se vieran correctas en varias resoluciones y era especialmente beneficioso para el zoom del navegador o los tamaños mínimos de fuente. Pero los navegadores modernos ahora manejan el cambio de tamaño extremadamente bien con diseños específicos de píxeles, incluso ampliando las imágenes según sea necesario. Entonces se ha vuelto menos importante usar tamaños relativos.

— Matt S
fuente