Différence entre Px, EM,% dans CSS expliquée
Ce message démontre la différence entre PX, EM et% (pourcentage). De plus, vous apprenez également à connaître les longueurs d'unité immobilières et absolues et leurs différences.
Quelle est la différence entre PX, EM et pourcentage (%) dans CSS?
Dans CSS, les unités de dimensionnement sont classées en deux catégories, l'absolu et la mesure relative.
Unités absolues
Les unités absolues ont des valeurs fixes, ne changent donc pas leurs valeurs jusqu'à ce que l'utilisateur les modifie manuellement. Le px L'unité tombe dans la catégorie absolue des unités de dimensionnement dans CSS. Bien que le PX ne soit pas bon pour la réactivité, il est toujours pratiqué où les éléments nécessitent des tailles fixes à l'écran. De plus, le nouvel utilisateur a tendance à utiliser le px comme l'unité de dimensionnement qu'elle est facile à manipuler et ne dépend de aucune autre unité ou élément de taille.
Unités relatives
Les deux autres em et pourcentage appartiennent à la catégorie relative des éléments car ils modifient tous les deux leur comportement pour gérer la réactivité.
EM: Cette unité fait référence à la taille de la police de l'élément parent / racine. Il peut également être utilisé pour le réglage de la largeur / hauteur, mais la valeur de 1EM serait 16px.
pourcentage(%): Le pourcentage de l'unité montre la pertinence avec l'élément parent.
Par exemple, si un élément parent définit le largeur = "10px". Maintenant, cette valeur serait considérée comme une référence pour associer la largeur pourcentage.
Note: CSS propose diverses autres unités relatives qui incluent Rem, VW (voir la largeur du port) et VWH (vue sur la hauteur du port) appartiennent également à la catégorie relative.
Exemple: utilisant des valeurs PX, EM et pour pourcentage
Le code HTML suivant est pratiqué à la différence entre les valeurs PX, EM et pour pourcentage.
Html
largeur en%
taille de police dans EM
Dans le code ci-dessus, il y a des éléments bidirectionnels (étiquettes div) et chaque parent a un enfant. Le premier parent Div contient un paragraphe qui exercerait la largeur en pourcentage et le deuxième parent Div considère la taille de la police de l'élément.
CSS
Le CSS ci-dessus serait la principale partie prenante pour démontrer la différence entre PX, EM et pourcentage. La largeur des balises Div est définie sur 250px, ce qui signifie qu'il serait égal à 100%. Par exemple, dans le code ci-dessus .par classe prend 75% de la largeur totale (250px).
De même, la taille de la police des deuxième éléments div est définie sur 12px, ce qui signifie que 1EM serait égal à 12px. Si la valeur de l'EM est modifiée, elle changerait par rapport au 12px (à partir de l'élément parent).
Sortir
À partir de la sortie, il est observé que la largeur de l'élément enfant (paragraphe) a été ajustée à 75% de son élément parent (div). De plus, la taille de la police est définie sur 2EM, ce qui signifie qu'elle serait deux fois par rapport à la taille de la police de son élément parent (12px = 1EM).
Conclusion
Le px appartient à la catégorie absolue des unités de longueur tandis que l'EM et le% (pourcentage) se réfèrent à la classe relative des unités de dimensionnement. La valeur de px est fixé sur le document HTML mais le em et %(pourcentage) dépend de l'unité utilisée par l'élément parent. L'EM manipule principalement la taille de la police des éléments HTML et l'unité (%) pourcentage se réfère principalement à la modification de la hauteur / de la largeur d'un élément HTML (selon l'élément parent). Dans cet article, vous auriez appris les bases de diverses unités telles que PX, EM et pourcentage. Pour une meilleure compréhension, nous avons démontré un exemple qui clarifie mieux la différence entre toutes ces unités.