Différence em px %

Voila tout est dans le titre, cette question me turlupine depuis pas mal de temps, et je pense qu'elle est la cause de quelques problèmes que je rencontre des fois.

Les unités de mesure en CSS sont le px, le %, et l'unité em;

D'après ma propre expérience, le % est à préconiser pour un design dit "élastique" donc qui réagi bien au zoom et dézoom.

Em quant à lui, est utilisé pour les caractères ? et le px je ne sais pas ?

Tout ca est plutôt floue pour moi, j'ai cherché sur le site mais je n'ai rien trouvé.

Si vous pouviez m'éclaircir sur ce sujet, car c'est une des dernieres zone d'ombre du CSS pour moi.

Et aussi, existe-t-il d'autre unité de mesure ?

Merci d'avance !
Modifié par Gili (14 Sep 2010 - 21:31)

Bonjour aussi,

Les unités que tu cite peuvent être utilisées pour tous les attributs acceptant des valeurs de taille.

Il est cependant conseillé de ne pas utiliser px pour les unité de fonte car cela empêche le redimensionnement des caractères sous IE6 et 7 ; mais c'est la seule contre-indication.

Il existe aussi les ex, mais elles sont rarement utilisées.

rha flute, j'ai fais ce que je déteste, j'ai oublié de dire bonjour.

Bonjour !

qu'appels-tu unité de fonte ?

Pour délimité des block que préconiserais-tu ? j'ai utilisé le px sur mon site, mais au zoom et dézoom certain bloc se décalent de quelques px ce qui ne rend pas très bien.

Un site doit-il exclusivement utilisé qu'une unité de mesure ? ou alors chaque élément à une unité qui lui convient le mieux ? (ex : pour les caractères -> em, pour délimité les block -> %, etc)

Merci d'avance

salut Mikachu,

Merci de vos réponses,

Mais il y a bien une différence notable entre ces trois unités, j'aimerai vraiment savoir la réelle différence, dans quel cas utilisé quelle unité ? et surtout qu'est-ce-qu'a ce fameux em de particulier, car à l'école on utilise que ca, pourtant quand je regarde le code des sites de la toile, je ne l'ai jamais vu utilisé.

Et comment cela ce fais que quand je détermine la hauteur d'un li qui sera un onglet de menu par exemple, quand je dézoom il se décale un peu vers le haut (ce qui le dissocie de mon bloc de contenu), j'ai utilisé le px pour définir la hauteur.

Merci d'avance ! ^^
Modifié par Gili (15 Sep 2010 - 00:23)

Hello,

Pour faire rapide :
- le pixel est l'unité par définition d'un écran numérique. Il désigne la plus petite partie visible sur un écran et est différent entre un écran Mac et PC par exemple. Il peut être problématique lorsque de grandes dimensions en pixels sont affichées sur des petits écrans (débordements, scroll, ...)
- le % est une unité dite fluide : la taille d'un bloc, ou d'une police en % dépend de la taille de son bloc parent (width, height, margin, etc.). Les dimensions varient en fonction de la largeur de l'écran.
- le em est une unité fluide aussi : la taille d'un bloc ou d'une police en em dépend de la taille de police de son bloc parent (font-size). Les dimensions varient en fonction de la taille de police du document.

Schématiquement :
- utiliser px ou em plutôt pour les tailles de textes
- utiliser px ou % plutôt pour la taille des blocs

Un article sur Alsa : "Typographie web : gérer la taille du texte avec les « em »"

Laurie-Anne a écrit :
Il est cependant conseillé de ne pas utiliser px pour les unité de fonte car cela empêche le redimensionnement des caractères sous IE6 et 7

A ma connaissance, c'est uniquement problématique sur IE6. Il me semble même qu'Accessiweb 2 ne considère plus que les unités en px soient gênantes pour l'accessibilité.

Bonne journée

Raphael a écrit :
A ma connaissance, c'est uniquement problématique sur IE6. Il me semble même qu'Accessiweb 2 ne considère plus que les unités en px soient gênantes pour l'accessibilité.

En fait cela pose le même problème à IE7 en zoom text-only (je suis peut-être la seule à désactiver les zoom de page, mais bon ^^; )

Laurie-Anne a écrit :
En fait cela pose le même problème à IE7 en zoom text-only (je suis peut-être la seule à désactiver les zoom de page, mais bon ^^; )

Ah dans ce cas, le mécanisme existe sur IE8 et même sur Firefox
Mais par défaut, il n'y a que IE6 qui est incapable d'agrandir les tailles en pixels.