Compréhension approfondie des différences entre px, rem, em, vh, vw

Longueur absolue

px

px est la valeur du pixel , C'est une longueur fixe, comme nos mètres et centimètres.

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 la balise html (car le nœud html est le nœud racine, qui est le r en rem :root), modifiez font-size: 32px, pour que 1rem = 32px

code

<div class="div-rem">rem</div>

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

em

em avec La relation de calcul de la valeur px

em est un multiple de px

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

em Comment modifier le calcul relatif avec px Relation

Nous pouvons modifier la taille de police sur notre propre élément : 32px, donc 1em = 32px

Si la taille de police n'est pas définie sur notre propre élément , nous pouvons également définir font-size sur la taille de l'élément parent, affectant ainsi la valeur em utilisée par son propre élément (élément enfant).

La différence entre rem et em

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!