Quelle est la différence entre rem et px en CSS3

La différence entre rem et px dans CSS3 est la suivante : px est une unité de longueur relative, qui est relative à la résolution de l'écran du moniteur ; tandis que rem est également une unité relative, mais elle est relative à l'élément racine HTML.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Quelle est la différence entre rem et px en CSS3 ?

1. Px est une unité de longueur relative, qui est relative à la résolution de l'écran du moniteur.

Avantages et inconvénients : Il est relativement stable et précis, mais la page sera chaotique lors du zoom ou du zoom dans le navigateur.

3. rem est une nouvelle unité relative en CSS3. REM est une unité relative et est relative à l'élément racine HTML. Lorsque vous utilisez rem pour définir la taille de la police dans l'élément racine, 1rem est actuellement égal à la taille de police par défaut du navigateur. La taille par défaut de la plupart des navigateurs est de 16 pixels

Cette unité peut être considérée comme combinant les avantages de la taille relative et de l'absolu. taille. Grâce à lui, il peut non seulement ajuster la taille de toutes les polices proportionnellement en modifiant l'élément racine, mais également éviter la réaction en chaîne consistant à composer les tailles de police couche par couche.

Informations étendues

px :

px est en fait un pixel Lorsque vous utilisez PX pour définir la taille de la police, 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, si le zoom du navigateur est modifié, la mise en page de notre page Web sera cassée, donc pour ceux qui se soucient de leur La convivialité du site Web est un problème majeur pour les utilisateurs.

rem :

rem est une nouvelle unité relative (root em, root em) dans CSS3 Lorsque vous utilisez rem pour définir la taille de la police d'un élément, il s'agit toujours d'une taille relative, mais elle est uniquement relative au. Élément racine HTML. On peut dire que cette unité combine les avantages de la taille relative et de la taille absolue. Grâce à elle, vous pouvez ajuster toutes les tailles de police proportionnellement en modifiant uniquement l'élément racine, et vous pouvez éviter la réaction en chaîne consistant à composer les tailles de police couche par couche.

Exemple :

p {font-size:14px; font-size:.875rem;}

(Partage de vidéos d'apprentissage : Tutoriel vidéo 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!