La différence entre px, em et rem

Ils sont tous utilisés pour définir la taille de la police ainsi que la largeur et la hauteur de la boîte, mais px ne changera pas en raison des changements de taille du navigateur, tandis que em et rem changeront en raison des changements dans la taille du navigateur.

Dans le processus d'écriture de code, nous utilisons souvent des unités de taille lors de la définition de la taille des polices ou des valeurs de largeur et de hauteur des éléments en CSS. en détail les unités communes en CSS. Le nom de l'unité de taille et son utilisation ont une certaine valeur de référence. J'espère que cela sera utile à tout le monde.

[Cours recommandés : Tutoriel CSS]

px

px est l'abréviation de pixel, qui signifie pixel. Il est utilisé pour spécifier la taille de la police ainsi que la largeur et la hauteur de l'élément. Les pixels sont relatifs à la résolution de l'écran du moniteur

Exemple : Réglez la largeur à 200px et la hauteur à 200px pour un élément div

div{
width:200px;
height:200px;
border: 1px solid #ccc;
text-align: center;
line-height: 200px;
font-size: 16px;

		}

Le rendu est le suivant :

em

em est une unité de longueur relative, qui est relative à la taille de la police du texte dans l'objet actuel. Si nous n'avons pas défini la taille de police du texte actuel, alors em sera relatif à la taille de police par défaut du navigateur

La taille de police par défaut dans le navigateur est de 16px, en d'autres termes, 1em=16px, généralement. lorsque nous écrivons, les unités Em sont souvent utilisées dans une mise en page adaptative. Simplifiez le code en définissant la valeur de taille de police dans le sélecteur de corps en CSS afin que tous les ems de la page soient relatifs à la valeur du corps.

Exemple : définissez la largeur de l'élément div sur 100px et la hauteur sur 100px en changeant l'unité de taille en em

1em=16px, donc 100px=6.25em

<style>
div{
width:6.25em;
height:6.25em;
border: 0.0625em solid #ccc;
text-align: center;
line-height: 6.25em;
}
</style>

Rendu :

Nous pouvons également définir directement une valeur sur le corps afin que sa valeur soit directement relative au corps, puis diviser la valeur px d'origine par 10 est la valeur de em

body{
font-size: 62.5%
	}
div{
width:10em;
height:10em;
border:0.1em solid #ccc;
}
</style>

Rendu :

Comme le montre la figure ci-dessus, la valeur de em n'est pas fixe mais est relative . Par rapport à la taille de son élément parent

rem :

rem est une nouvelle unité relative en CSS3. La différence entre elle et em est que rem est utilisé pour. définir l'élément La taille de la police est toujours relative, mais relative uniquement à l'élément racine HTML. Son utilisation est très simple. Vous pouvez modifier sa valeur en changeant la taille de l'élément racine

Exemple : Définissez la largeur à 100px et la hauteur à 100px pour l'élément div en changeant l'unité de taille en rem<🎜. >

body{
		font-size:10px;
	}
		div{
			width:15rem;
			height:15rem;
			border:0.01rem solid pink;
			text-align: center;
			line-height: 15rem;
			font-size: 2rem;
		}

Rendu :

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde.

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!