Une brève analyse des unités px, rem et em en CSS

Longueur absolue

px

px est une valeur de pixel, qui est une longueur fixe, comme nos mètres et centimètres Idem.

Longueur relative

Pourquoi avons-nous besoin d'une longueur relative rem em etc ?

La longueur fixe ne peut plus répondre à nos besoins actuels.

Par exemple : Par exemple, lorsque nous réduisons notre écran, nous devons non seulement réduire la largeur et la hauteur de notre boîte, mais nous souhaitons également réduire la taille de la police, afin que l'expérience utilisateur soit meilleure. .

rem

La relation de calcul entre rem et px

La valeur de rem est un multiple de px

Par défaut font-size = 16px, puis 1rem = 16px

rem Comment modifier la relation de calcul relative avec px

On peut et uniquement dans les balises html (Parce que le nœud html est le nœud racine, qui est le r in rem: root), modifiez la taille de la police : 32px, donc 1rem = 32px

code

<p class="p-rem">rem</p>
/* rem的用法 */
html{
    font-size:16px;  // 1rem = 16px
}
.p-rem{
    width: 10rem;    // 10rem = 10 x 16 = 160px
    height: 10rem;   // 10rem = 10 x 16 = 160px
    font-size: 1rem; // 1rem = 16px
    background-color: #a58778;
}

em

La relation de calcul entre em et px

La valeur de em est un multiple de px

Par défaut font-size = 16px , alors 1em = 16px

Comment modifier la relation de calcul relative entre em et px

On peut modifier la taille de police sur nos propres éléments : 32px, donc 1em = 32px

S'il n'y a pas de jeu de polices sur la taille de nos propres éléments, nous pouvons également définir la taille de la police sur l'élément parent pour affecter la valeur em utilisée par nos propres éléments (éléments enfants).

Tutoriel recommandé : "Tutoriel CSS"

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!