px, %, em, rem... quelle unité de mesure utiliser en CSS ? — Codeur Tuto (2024)

En CSS vous pouvez ajuster la taille de vos textes et éléments avec différentes unités. Il en existe plusieurs mais les plus connues sont surement le pixel (px) et le pourcentage (%).

Effectivement, ces deux unités sont pratiques car elles remplissent chacune une fonctionnalité de par leur nature. Le pixel est une unité absolue relative à la taille et résolution de l’écran qui permet un affichage net sur chaque écran alors que le pourcentage est une unité relative à un élément HTML qui permet de définir une taille en fonction de celle de l’élément HTML parent.

Cependant, il existe d’autres unités qui ont chacune leur particularité et certaines une utilité spécifique. A travers cet, nous allons voir les unités existantes en CSS et lesquelles ont une utilité spécifique.

Sommaire :

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.

Intégration HTML

Création d'animations CSS

Ajout de formulaires

Trouver un développeur web

Les unités de mesure à éviter pour un affichage sur ordinateur

Parmi les différentes unités de taille il existe des unités qui ne sont pas conseillées à utiliser pour un affichage sur un écran d’ordinateur. Vous pouvez néanmoins utiliser ces unités pour des supports haute-résolution ou bien pour les supports d’impression.

Ces unités sont les : pt, cm, mm, in et pc qui représentent respectivement le « point », « millimètre », « centimètre », « pouce » et « pica ».

Que vous recherchiez un graphiste pour créer une affiche ou un web designer pour améliorer le design de votre site, trouvez le freelance qu’il vous faut sur Codeur.com. Décrivez votre projet et recevez de nombreux devis de professionnels, gratuitement.

Le pixel

Le pixel, comme vu en introduction de cet article, est une unité relative à la résolution et à la taille de l’écran sur lequel il est affiché.

Cette unité considérée comme « magique » permet un affichage net et visible, même si petite, sur n’importe quel support.

Le pourcentage

Cette unité notée « % » est relative à son élément parent. Un élément avec une taille de « 50% » et qui a un élément parent avec une taille de 50px aura alors une taille de 25px.

Le pourcentage sera à utiliser à chaque fois que vous souhaiterez définir une taille en fonction de son élément parent.

Le em

Le « em » correspond à la taille de la police de caractère de l’élément en cours et si cette taille n’est pas redéfinie alors cette taille correspondra à la taille de la police de l’élément parent. Par exemple, si la taille de la police est définie à 20px alors 1em sera égale à 20px.

Cette unité pourra vous permettre de définir les marges intérieures « paddings » ou extérieures « margins » qui seront liées à la taille du texte et ainsi les redimensionner en fonction de cette dernière sur différents supports.

Ainsi sur un grand écran, les marges seront plus grandes tout comme la taille du texte et à l’inverse sur un petit écran (comme un écran de smartphone) les textes seront plus petits et les marges aussi.

Vous trouverez souvent les déclarations «margin: 1em» et «text-indent: 1.5em» en CSS.

Le ex

L’unité «ex» est une unité rarement utilisée qui permet d’exprimer des tailles relatives à l’x-height de la police. Le x-height est la hauteur des plus petites lettres (minuscules) d’une police.

Le rem

L’unité « rem » signifiant « root em » reprend le principe de l’unité « em », c’est-à-dire correspondre à la taille de la police d’un élément et cet élément est l’élément racine du document (root).

Ainsi le « rem » permet de définir une valeur constante tout le long du document égale à la taille de la police de l’élément racine.

Cette unité peut être alors utilisée pour créer des éléments et propriétés CSS responsives puisque qu’elle s’adaptera à la taille de la police du support d’affichage.

px, %, em, rem... quelle unité de mesure utiliser en CSS ? — Codeur Tuto (5)

Trouvez le meilleur développeur web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans obligation

Déjà plus de 75000 clients

Trouver un freelance

Les vw et vh

Les unités « vw » et « vh » sont similaires car elles correspondent au viewport de la fenêtre.

« vw » correspondra à la largeur du viewport alors que « vh » se réfèrera à la hauteur du viewport.

«vw» correspond ainsi à 1/100 e ou 1% de la largeur de la fenêtre et de même pour «vh» qui équivaut à 1/100 e ou 1% de la hauteur de la fenêtre.

Grâce à ces deux unités, vous allez pouvoir définir des tailles relatives à la taille du viewport de votre support d’affichage et ainsi créer facilement des éléments responsifs ou par exemple un élément qui prendra toute la largeur de l’écran.

Les vmin et vmax

Les unités «vmin» et «vmax» équivalent respectivement à 1/100 e de la dimension la petite et à 1/100 e de la dimension la grande du viewport.

Les éléments avec une unité « vmin » s’adapteront selon la hauteur de la fenêtre alors que les éléments avec une unité « vmax » s’adapteront selon la largeur de la fenêtre

Pour un viewport ayant les dimensions suivantes : 2000 px de large et 1000 px de hauteur, une valeur de « 1vmin » sera égale à « 10px » et une valeur de « 1vmax » équivaudra à « 20px ».

Conclusion

Il existe de nombreuses unités de taille en CSS, certaines ne seront à utiliser que pour quelques cas particuliers tel que les pt, cm, mm, in et pc et les autres seront à utilise selon le besoin. Néanmoins, les unités relatives sont souvent plus appréciées pour leur côté «adaptable» et les unités «rem», «vh» et «vw» sont de plus en plus utilisées pour leur simplicité et efficacité de gestion du multi-support.

L’utilisation des bonnes unités est un chapitre complexe de l’apprentissage du CSS.

Les unités nécessitent d’être choisies correctement pour avoir un affichage joli et efficace sur tout type d’écran, n’hésitez donc pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement un freelance qui pourra vous aider à gérer correctement les tailles de police et de visuels sur votre site pour un résultat responsive.

px, %, em, rem... quelle unité de mesure utiliser en CSS ? — Codeur Tuto (2024)

FAQs

Quelle unité utiliser CSS ? ›

Une autre unité couramment utilisée en CSS, c'est le em. Cette unité est relative, et définie en fonction de son parent. Attribuer 1em à un élément revient à lui donner 100% de la taille de son parent. Donc, logiquement, 0.5em lui donnera la moitié de la taille de son parent, et 2em deux fois celle-ci.

Qu’est-ce que px em rem en CSS ? ›

Alors que PX, EM et REM sont principalement utilisés pour la taille de police , %, VW et VH sont principalement utilisés pour les marges, le remplissage, l'espacement et les largeurs/hauteurs. Pour rappel, VH signifie « viewport height », qui est la hauteur de l'écran visible. 100VH représenterait 100 % de la hauteur de la fenêtre d'affichage ou toute la hauteur de l'écran.

Quelles sont les 2 unités de mesure CSS à privilégier pour la taille de la police ? ›

Ainsi, l'unité em sera relative à la taille (corps) de la police pour l'élément ; l'unité vh sera relative à la hauteur de la zone d'affichage (viewport).

Qu'est-ce que REM en CSS ? ›

Pour récapituler, l'unité rem signifie « la taille de police de l'élément racine » (rem est l'acronyme anglais de « root em » qu'on pourrait traduire par « em racine ».)

Quelle unité utiliser en CSS ? ›

Pixels . Les pixels sont l'unité CSS la plus couramment utilisée et acceptée.

Qu'est-ce qu'un pixel en CSS ? ›

* Les pixels (px) sont relatifs à l'appareil de visualisation . Pour les appareils à faible résolution, 1 px correspond à un pixel (point) de l'écran. Pour les imprimantes et les écrans haute résolution, 1 px implique plusieurs pixels d’appareil.

Quand utiliser px et rem ? ›

Les pixels sont une unité absolue, donc lorsque vous définissez la taille de la police sur 24 pixels, elle sera de 24 pixels. Les rems, en revanche, sont des unités relatives basées sur la taille de police du document . La taille de police par défaut du document est de 16 pixels, donc 1,5 rems x 16 px équivaut à 24 pixels.

Quand utiliser REM vs EM ? ›

Par exemple, nous pouvons utiliser les unités rem pour les paramètres globaux et les unités em pour les ajustements locaux et relatifs au sein des composants . ### Création d'échelles modulaires Nous pouvons utiliser des unités em ou rem pour créer des échelles modulaires, qui sont des ratios prédéfinis pour la mise à l'échelle du texte et d'autres éléments.

Comment utiliser rem en HTML ? ›

La taille de police de base pour les unités rem est définie sur l'élément racine (html) à l'aide de la propriété font-size . Par exemple, si vous souhaitez que la taille de police de base soit de 10 px, vous utiliserez : html { font-size: 10px; }. Toutes les unités rem seront alors relatives à cette taille.

Comment calculer REM en CSS ? ›

Chaque 16px équivaut à 1rem lorsque la taille de la police du navigateur est définie sur "par défaut" dans les paramètres du navigateur. Lorsque nous construisons notre projet Webflow, nous utilisons toujours 16px comme valeur de base pour calculer le rem. Chaque conversion de mesure rem est un multiple de 16. Pour convertir la valeur px en rem, divisez cette valeur par 16 .

Qu’est-ce que la mesure em en CSS ? ›

Pour récapituler, l'unité em signifie " la taille de police de mon élément parent " si elle est utilisée pour la taille de police (et " ma propre taille de police " lorsqu'elle est utilisée pour autre chose). Les éléments <li> à l'intérieur du <ul> avec une classe d'ems prennent leur dimensionnement auprès de leur parent.

Le REM change-t-il avec la taille de l’écran ? ›

Cependant, REM n'a rien à voir avec la taille de l'écran . 1rem sera, par défaut, de 16px sur un écran de smartphone ou de télévision.

Comment faire un rem ? ›

Dans la plupart des navigateurs, cette taille est de 16px par défaut. Ensuite, pour convertir une mesure de Px en REM, il suffit de diviser la taille en pixels par la taille de la police de base. Par exemple, pour convertir 32px en REM, vous feriez 32/16, ce qui donnerait 2REM.

Pourquoi utiliser le REM ? ›

Le REM permet de définir une valeur constante, égale à la taille de la police qui s'affiche sur votre écran. Elle est donc notamment utilisée pour développer des éléments et propriétés CSS responsives. Cette unité de mesure s'adapte donc parfaitement à Webflow.

Quelle sont les REM ? ›

Les rem sont une unité de mesure relative qui se base sur la taille de la police parente pour définir la taille d'un élément sur un site web. Les rem sont donc plus flexibles que les pixels et s'adaptent automatiquement aux différentes tailles d'écrans.

Quel est le framework CSS le plus utilisé ? ›

Bootstrap, le pionnier des frameworks CSS, demeure le plus utilisé à ce jour, reconnu pour sa facilité d'utilisation et sa vaste bibliothèque de composants. Il permet aux développeurs de construire rapidement des interfaces utilisateur élégantes et réactives.

Quelle unité utiliser pour la marge ? ›

rem ou em doivent être utilisés pour la marge ou le remplissage selon que vous souhaitez que l'élément soit relatif à l'élément racine ou au parent.

Comment écrire un fichier CSS ? ›

Méthode n°1 : écrire le CSS au sein du fichier HTML, dans un élément style. La première façon d'écrire du code CSS va être à l'intérieur même de notre page HTML, au sein d'un élément style . En plaçant le CSS de cette façon, le code CSS ne s'appliquera qu'aux éléments de la page HTML dans laquelle il a été écrit.

Comment utiliser le CSS ? ›

Le navigateur parse le CSS, classe les différentes règles par types de sélecteur (par exemple, élément, classe, ID, etc.) dans des « buckets ». En fonction des sélecteurs trouvés, le navigateur calcule quelle règle s'applique à quel nœud du DOM. Chaque nœud du DOM ciblé par CSS est étiqueté par sa règle de style.

References

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Prof. Nancy Dach

Last Updated:

Views: 5459

Rating: 4.7 / 5 (77 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Prof. Nancy Dach

Birthday: 1993-08-23

Address: 569 Waelchi Ports, South Blainebury, LA 11589

Phone: +9958996486049

Job: Sales Manager

Hobby: Web surfing, Scuba diving, Mountaineering, Writing, Sailing, Dance, Blacksmithing

Introduction: My name is Prof. Nancy Dach, I am a lively, joyous, courageous, lovely, tender, charming, open person who loves writing and wants to share my knowledge and understanding with you.