Présentation de l'utilisation de REM en CSS3

Pour définir les polices sur la page, nous savons qu'il y en a deux communes, px et em.

px

Dans la production de pages Web, nous utilisons généralement "px" pour définir notre texte car il est plus stable et précis. Mais il y a un problème avec cette méthode. Lorsque l'utilisateur parcourt la page Web que nous avons créée dans le navigateur, il modifie la taille de la police du navigateur (bien que la plupart des gens ne modifient pas la taille de la police du navigateur pour le moment). utilisera notre page Web. La Mise en page était cassée, puis il a été proposé d'utiliser "em" pour définir la police de la page Web.

em

est généralement basé sur la font-size du corps

Écrit couramment :

body {
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
}
h1 {
    font-size: 2.4em;
    /*2.4em × 10 = 24px */
}
p {
    font-size: 1.4em;
    /*1.4em × 10 = 14px */
}
li {
    font-size: 1.4em;
    /*1.4 × ? = 14px ? */
}

Pourquoi" li" "Que "1.4em" soit "14px" sera un point d'interrogation ? Lorsque vous utilisez "em" comme unité, vous devez connaître les paramètres de son élément parent, car "em" est une valeur relative, et c'est une valeur relative à l'élément parent

Formule de calcul : 1 ÷. élément parent font-size Vous n'êtes pas sûr de la valeur, donc pour résoudre le problème, soit vous connaissez la valeur de son élément parent, soit vous utilisez "1em" dans n'importe quel élément enfant.

rem

rem : La description du site officiel du W3C est "la taille de la police de l'élément racine", c'est-à-dire que rem est relatif à l'élément racine.

Il nous suffit de déterminer une valeur de référence dans l'élément racine et de définir la taille de la police dans l'élément racine. Cela peut être entièrement basé sur vos propres besoins.

Méthode d'écriture courante :

définit une taille de police de base de 62,5 % (soit 10 px) dans l'élément racine, principalement pour faciliter le calcul. non défini, il sera basé sur "16px" qui est la base). À partir des résultats de calcul ci-dessus, nous pouvons utiliser « rem » aussi facilement que « px », et en même temps résoudre la différence entre « px » et « em ».

html {
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
}
body {
    font-size: 1.4rem;
    /*1.4 × 10px = 14px */
}
h1 {
    font-size: 2.4rem;
    /*2.4 × 10px = 24px*/
}

Remarque : sous Chrome, la police inférieure par défaut est de 12 px, vous pouvez définir la taille de la police : 625 %, et ainsi de suite pour les autres

Compatibilité des navigateurs

IE9 ou supérieur Les navigateurs prenant en charge CSS3 le prendront certainement en charge. Si vous souhaitez être compatible avec les versions inférieures d'IE, vous pouvez envisager d'utiliser px pour les navigateurs de version inférieure inférieure à IE9.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!