Explication détaillée de l'utilisation de REM dans CSS3-tutoriel CSS-php.cn

Explication détaillée de l'utilisation de REM dans CSS3

黄舟

Libérer： 2016-12-23 15:32:22

original

1399 Les gens l'ont consulté

Définissez la police sur la page. Nous savons qu'il y en a deux communes, px et em.

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, et il a été proposé d'utiliser "em" pour définir la police de la page Web.

Habituellement, la taille de la police du corps est utilisée comme base

Méthodes d'écriture courantes :

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 ? */
}

Copier après la connexion

Pourquoi y a-t-il un point d'interrogation si "1.4em" de "li" est "14px" ? 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 officielle du site Web du W3C est "la taille de la police de l'élément racine", c'est-à-dire , rem est relatif sur 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. Vous pouvez également vous référer à l'image ci-dessous :

pxtoem

Les étudiants qui ont du mal à se convertir peuvent également se rendre sur le site http://pxtoem.com/ pour mettre en place

Écriture commune :

est défini dans l'élément racine. Une taille de police de base est de 62,5% (soit 10px. Définir cette valeur sert principalement à faciliter le calcul. Si elle n'est pas définie, elle sera basée sur "16px"). À 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*/
}

Copier après la connexion

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

Ce qui précède est l'explication détaillée de l'utilisation de REM en CSS3, plus Pour le contenu associé, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !