Dois-je définir la taille de la police par défaut sur l'élément body ou html ?

Question

J'aime travailler dans em lors de la création de sites web. C'est pourquoi j'ai défini une valeur par défaut font-size de 100.01% en el body élément.

Ma question est de savoir si je dois définir la valeur par défaut font-size en el body ou le html élément ? Quels sont les avantages et les inconvénients (le cas échéant) des deux ?

Answer 1

Maintenant que le rem commence à devenir populaire, il est conseillé de définir la taille de la police de base sur l'élément racine (balise html) ( rem signifie r oot em ).

Answer 2

Je ne pense pas qu'il y ait un avantage ou un inconvénient à fixer la base font-size soit sur html o body pour permettre le dimensionnement avec les ems ; ils auront tous deux le même effet.

Sans rapport avec la question :

Je suggère cependant d'utiliser un autre défaut font-size . Je le mettrais comme :

body {
    font-size: 62.5%;
}

Cela permet de réduire la valeur par défaut font-size de 16px jusqu'à 10px . Cela permet donc de choisir font-size beaucoup plus facile car il n'est pas nécessaire de faire des calculs difficiles. Cela signifie que 1em est égal à 10px et donc de calculer le px La taille est une question de multiplication par 10 :

• 1.0em = 10px
• 1.4em = 14px
• 1.8em = 18px
• 2.2em = 22px

Answer 3

Si vous voulez vraiment respecter les règles tout en gardant une certaine souplesse, vous devriez envisager cette solution :

• html La taille de la police de l'utilisateur est la Racine font-size, ce qui signifie qu'il sera utilisé comme base pour le calcul du rem, mais c'est tout, rien d'autre. Il ne doit pas être utilisé pour le calcul de la taille réelle du texte : c'est juste une sorte d'astuce pour certains navigateurs.
• body La taille de la police du texte est la taille de la police par défaut : tout votre texte doit avoir cette taille, à moins de remplacer la définition
• les éléments spéciaux doivent avoir des tailles en rem, avec un repli en pixels

Voilà à quoi cela ressemble en CSS :

html {
    font-size: 100% /* or 62.5% or whatever you like, it doesn't matter, it's just a browser fix, however "rem" units will be based on that value, so make it confortable for calculations */
}

body {
    font-size: 0.75em; /* That is your text's default font size. Here i chose 12px */
}

h1 { /* or whatever element you want to change the font size of */
    font-size: 20px; /* for browsers that don't understand the "rem" unit */
    font-size: 1.25rem; /* which equals to 20px if html's font-size was set to 100% */
}

Notez que, bien que tous les éléments de la page doivent hériter de l'élément body vous pouvez utiliser une définition incluant toutes les balises, comme on le voit souvent dans les réinitialisations HTML :

a,
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    font-size: 0.75rem;
}

Je ne recommande cependant pas cette réinitialisation. Les normes sont faites pour vous aider à éviter ce genre d'astuces.