Utilisation d'une unité relative, comme EM est un excellent moyen de maintenir le rythme vertical d'une page Web lorsque l'utilisateur redimensionne le texte dans leur navigateur. Constamment atteindre pour une calculatrice pour calculer la valeur correcte EM utiliser à chaque fois vous avez besoin est aussi une excellente façon de conduire vous-même fou.
Disons que vous avez un H3 c'est 24 pixels. Il n'a pas d'importance comment le font-size est défini (pixels, MR, pourcentages, etc.) Vous pouvez vérifier la police à taille réelle en pixels en utilisant Firebug en cochant "Afficher Computed Style" dans le menu Options dans le coin supérieur droit de la CSS / panneau Style lors de l'affichage en mode HTML.
Vous avez coché la maquette de conception et de mesurer exactement 9 pixels de marge du bas sous le H3 jusqu'à l'élément suivant. Bien sûr, vous pouvez définir le bottom-margin du H3 à 9 pixels et de progresser. Mais ce ne sera pas à l'échelle lorsqu'un utilisateur bosses leur taille du texte dans leur navigateur et de votre rythme vertical va s'écrouler comme le H3 se développe en taille, mais garde le même 9 pixels de marge inférieure.
La formule de calcul de l'EM multiplicateur est:
désiré taille de pixel / taille actuelle pixel = multiplicateur
Donc, pour l'exemple H3: 24/09 = 0,375
J'utilise le EmChart tout le temps lors de la conversion comps design en HTML / CSS modèles - qui est fondamentalement toute la journée. Je trouve cela très utile pour calculer les marges de fond, la ligne des hauteurs (qui sont sans unité, mais la formule reste valable), les marges supérieure et haut / padding-bottom entre autres. Il est aussi très pratique pour conserver imbriqués relative tailles de police droite.
Comme je le disais, il ne dépend pas de la police en cours de taille est réglé. Donc, cela va fonctionner pour vous, peu importe ce que font-size ou de l'unité est (ou n'est pas) mis sur l'élément HTML, l'élément BODY, ou tout autre élément. Vous avez juste besoin de connaître la taille de pixels effectifs de l'élément courant que vous travaillez avec.