Explication détaillée des différences et des utilisations de (px em rem) en CSS

J'ai récemment rencontré le réglage de la taille de la police lors de l'apprentissage des polices. font-l'unité de taille peut être px ou em ou rem. Alors, quelles sont les différences entre ces unités ? l'utiliser ?

Px est l'unité d'échantillonnage de base des images en pixels. Elle est uniquement relative à la résolution de l'écran du moniteur. Qu'est-ce qu'un pixel ? Si vous zoomez sur une image, vous verrez des petits carrés et des carrés. la grille est un pixel. La taille de police par défaut du navigateur est de 16 px.
Les caractéristiques de px sont les suivantes : la casse de la police est fixe et constitue une valeur fixe. Les anciennes versions d'IE ne peuvent pas mettre à l'échelle les polices, mais vous n'avez désormais plus à vous soucier des versions inférieures d'IE. Par conséquent, on utilise généralement cette unité, qui est suffisamment précise.
em est une unité relative représentant la taille de la police par rapport à son élément parent, qui peut être un nombre décimal, entier . Par exemple, si la taille de police de l’élément parent est de 16 px, alors 1em équivaut à 16 px et 2em équivaut à 32 px. La caractéristique de
em est que ce n'est pas une valeur fixe, sa valeur changera avec la taille de la police parent. Scénario d'utilisation : lorsque les marges intérieures de l'élément actuel doivent être proportionnelles à la taille de police actuelle, vous pouvez les utiliser.
rem est également une unité relative. La différence avec em est qu'elle est relative à l'élément racine, ce qui rend les calculs beaucoup plus simples et plus pratiques que em, car sa valeur de référence est la taille de la sous-image de l'élément racine du navigateur. La valeur par défaut est 16px. La particularité de
rem est qu'il est facile à calculer par rapport à la taille de police de l'élément racine. Vous pouvez modifier la taille de la police de la page entière en contrôlant la taille de la police racine HTML, qui est l'adaptation mobile de la taille de la page.

Notes d'étude simples pour faciliter les futures révisions S'il y a des erreurs ou des lacunes, j'espère que vous pourrez me donner quelques conseils.

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!