Explication détaillée de la différence et de l'utilisation de px em rem en CSS

Cet article présente principalement la différence et l'utilisation de px em rem en CSS. A une très bonne valeur de référence. Jetons-y un coup d'œil avec l'éditeur ci-dessous

J'ai récemment rencontré le paramètre de taille de police lors de l'apprentissage des polices font-l'unité de taille peut être px ou. em ou rem, quelles sont les différences entre ces unités et comment les 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 de petites grilles carrées. . , une grille carrée est un pixel. La taille de police par défaut du navigateur est de 16 px. Les caractéristiques de

px sont : 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. Les caractéristiques de

em sont : 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, em peut être utilisé.

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 du sous-graphe de l'élément racine. , la taille par défaut du navigateur est de 16 px. Les caractéristiques de

rem sont : relatives à la taille de police de l'élément racine, facile à calculer. 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.

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!