Pourcentage ou Pixel pour les mises en page?

Qu'allez-vous utiliser pour une mise en page Web? Pourcentage ou pixels?
Quand faut-il utiliser l'un sur l'autre?

web-development design websites

— ACP
source

Ni - utilisation em d » ;-)

— Armand

(C'est "em" le terme typographique, pas "em" la balise HTML, au cas où quelqu'un boggle.)

— Frank Shearar

@Alison: tu ne veux pas dire "Ni - utiliser em s"?

— Alan Pearce

Plateforme cible? L'évidence serait le pourcentage, mais malheureusement, comme la plupart de vos ressources graphiques ne seront pas à l'échelle, je recommanderais les pixels

— dvhh

Hmmmm @Alan vous avez peut-être raison :—)

— Armand

Réponses:

Quelle unité vous utilisez dépend entièrement de ce que vous voulez accomplir. Les unités les plus utilisées dans les mises en page Web sont:

px - absolu; un pixel
pt - absolu; 1/72 pouce, environ 1,3 px pour les supports d'écran
em - par rapport à la taille de la police parente; 1.0em = taille d'un caractère (largeur de M majuscule)
% - par rapport au parent

Vous utilisez px pour les tailles qui restent constantes, par exemple une bordure 1px.
Vous utilisez em pour les tailles qui doivent suivre la taille de la police, par exemple une marge de 3,0 em.
Vous utilisez% pour les tailles qui doivent occuper un pourcentage du parent, par exemple une largeur de 50%.

Pour les mises en page Web, vous utilisez normalement des pixels ou des pourcentages selon que vous souhaitez une mise en page fixe (pixel) ou fluide (pourcentage).

— Guffa
source

Un petit peu à choisir: un em est la largeur, pas la hauteur, d'un M majuscule en typographie traditionnelle. Sans surprise, un en est la largeur d'un N majuscule. Un ex est la mesure de hauteur basée sur les caractères.

— Stan Rogers

@Stan Rogers: Je n'ai jamais dit que c'était la hauteur d'un M majuscule, quelqu'un d'autre l'a édité.

— Guffa

Ce qui importe, c'est que les informations fournies soient aussi correctes que possible, pas qui les a mises là. (Je ne peux pas encore éditer les réponses non wiki d'autres personnes, donc les commentaires sont les meilleurs que je puisse faire.)

— Stan Rogers

La taille du point n'est pas absolue, sauf si vous connaissez la résolution exacte du périphérique de sortie et le facteur d'échelle que l'utilisateur a défini (interface utilisateur indépendante de la résolution, «grandes polices» XP, etc.). En outre, l'iPhone 4 est de 326 dpi, ce qui est considérablement supérieur à 72 dpi

— JBRWilkinson

@JBRWilkinson: C'est une mesure absolue pour tout appareil donné. C'est aussi absolu que l'unité px; la taille d'un pixel diffère également pour un affichage donné.

— Guffa

J'ai tendance à utiliser des pixels pour les déclarations de largeur (qui sont généralement fixes), mais em pour la hauteur. De cette façon, la mise en page est redimensionnée verticalement, mais conserve une cohérence horizontale.

— sunwukung
source

J'utilise des tailles relatives / proportionnées autant que possible. Je trouve qu'il est beaucoup plus facile d'apporter des modifications aux dispositions plus tard. En outre, l'utilisation d'une taille par rapport à un élément parent signifie qu'une modification du parent se répercute facilement.

Traditionnellement, l'utilisation de tailles relatives permettait également aux pages de paraître correctes dans diverses résolutions et était particulièrement bénéfique pour le zoom du navigateur ou les tailles de police minimales. Mais les navigateurs modernes gèrent désormais très bien le redimensionnement avec des dispositions spécifiques aux pixels, et même agrandissent les images si nécessaire. Il est donc devenu moins important d'utiliser des tailles relatives.

— Matt S
source