Bonjour,
Aujourd’hui on va parler des unités en css.
Comme nous le savons déjà, le CSS est un langage de style qui nous aide à styliser des pages HTML.
Et aujourd’hui je viens vous parler des unités en css pour que vous compreniez un peu leur utilités et usage sur nos site web.
Les unités CSS sont utilisées pour spécifier la taille, la longueur ou la position des éléments sur une page Web. Il existe de nombreux types d’unités CSS, ils sont donc regroupés en 2 selon leur comportement sur nos appareils chacun avec ses propres avantages et inconvénients.
Alors nous allons faire le point là dessus pour bien comprendre leurs utilité
Les unités absolues
Il existe des unités en CSS qui ne sont influencées par aucun autre élément ou conteneur. On les appelle des unités absolues, elles sont généralement utilisées pour donner une longueur, par exemple un padding, une hauteur de bloc, la taille des caractères, etc.
on distingue plusieurs comme :
- Les pixels (px)
- Les pouces (in)
- Les centimètres (cm) et les millimètres (mm)
- Les picas (pc)
- Les points (pt)
Les pixels (px): il est le plus utilisé de tous, il est absolu, ce qui signifie qu’il a une taille fixe quelle que soit la taille de l’écran. Cela les rend idéales pour spécifier la taille exacte d’un élément, telle que la largeur d’une image ou la hauteur d’une zone de texte. Cependant, le pixel peut également être problématiques si vous souhaitez que votre site Web soit réactif
Pour mieux comprendre le pixel, prenais une image dans votre ordinateur ou votre téléphone et zoomer jusqu'à voir les petits carreaux monocouleur qui former l’image. ce sont les pixels
Les pouces (in): sont une unité de mesure physique basée sur les dimensions physiques de l'écran ou du support d'affichage. Par exemple, si nous définissons la largeur d'un élément à 2 pouces, celui-ci aura une largeur équivalente à 2 pouces sur le support d'affichage.
Pour la conversion 1 in = 96px, il est donc absolue aussi et il a les même avantages et inconvénient que le pixel
C’est pourquoi vous entendriez pour un écran on le dimensionne en pouce
Les centimètres (cm) et les millimètres (mm) **: communément appelés les mesures de la longueur, ce sont des unités absolues.
par conversion, _1 cm = 10 mm = 37,8 px**_.
Les points (pt): Les points sont couramment utilisés pour les tailles de police lorsqu'on imprime une page pour ceux qui utilise le logiciel de text comme (Office, WordPad, Docs, …)
Aussi en CSS, il nous aide a donné aussi a changé la police a nos mots sur notre site
La plupart du temps, vous n’utiliserez que le pixel ou le point, mais il est bon de comprendre la relation entre ces unités de mesure.
Retenez donc que 1 in = 96 px, 1 cm = 37,8 px et 1 mm = 3,78 px.
Pour illustrer les unités absolues, prenons un exemple concret. Admettons le code CSS suivant :
.element {
width : 100px ;
height : 100px ;
}
Cela signifie que l’élément aura la même dimension (100 x 100 pixels), quelle que soit la taille de l’écran.
Les unités relatives
À l’opposé des unités absolues, il existe des unités qui font varier la taille d’un élément en fonction de la taille de la police ou de l’élément parent.
Les unités relatives au texte
Ces unités dites relatives au texte sont de plus en plus utilisées pour harmoniser les éléments de votre site pour ajouter le design. On retrouve :
Le Em est une unité relative, ce qui signifie que sa taille est basée sur la taille de police de l’élément parent. Cela les rend idéales pour spécifier la taille du texte, car elles augmentent ou diminuent au fur et à mesure que la taille de police de l’élément parent change.
Les Ems sont également un bon choix pour créer des mises en page réactives, car ils s'ajustent automatiquement à la taille de l’écran.
Par défaut, 1 em = 16 px si aucune taille de police n’est définie.
Les rems est une unité relative basée sur la taille de police de l’élément racine. Cela en fait un bon choix pour créer des mises en page à la fois réactives et évolutives. En d’autres termes, elle dépend du font-size défini par défaut.
Les rems sont également plus à l’épreuve du temps que les pixels, car ils ne sont pas affectés par les modifications de la taille de police par défaut du navigateur .html
Parmi ces unités relatives au texte, vous serez amené à utiliser le em. Cette unité de mesure permet de garder un texte lisible. Autre avantage, si vous souhaitez modifier la taille de votre police d’écriture, vos éléments enfants s'ajustent automatiquement.
Pour illustrer les unités relatives au texte, prenons un exemple concret. considérons que le conteneur .box contient le conteneur .element et le code CSS suivant :
.box{
font size : 20px
}
.element {
font size : 2em
}
Cela signifie que l’élément aura (20px * 2) = 40px. si alors on changer la valeur de .box la mesure de .element se changera automatiquement
Les unités relatives au viewport
Qu'est-ce qu'une zone d'affichage (viewport) ?
Une zone d'affichage (aussi appelée viewport en anglais) représente la zone actuellement visible sur l'appareil. Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site ou une application.
D’autres unités en CSS permettent aux éléments de s’adapter à la taille du viewport, c’est-à-dire à la taille de la fenêtre du navigateur.
Ces unités relatives au viewport sont essentielles pour mettre en place un design responsive.
on retrouve :
- La hauteur du viewport (vh)
- La largeur du viewport (vw)
- Le viewport minimum (vmin)
- Le viewport maximum (vmax)
Les unités vh et vw
Les unités vh et vw sont similaires, à la seule différence qu’elles dépendent respectivement de la hauteur et de la largeur de la fenêtre de navigation.
Retenez que 1 vh = 1 % de la hauteur du viewport et que 1 vw = 1 % de la largeur du viewport.
L’unité de mesure vh est généralement utilisée pour permettre à un élément de s’adapter à la hauteur totale de la fenêtre :
Les unités vmin et vmax
Ces deux unités de mesure en CSS fonctionnent selon le même principe.
Avec le vmin, c’est la dimension minimale du viewport qui est prise en compte.
Par exemple, si ce dernier est de 1000px de haut par 800px de large, les éléments ayant une unité vmin s’adapteront en fonction de la largeur de la fenêtre.
Avec le vmax, les éléments s’adaptent en fonction de la dimension maximale du viewport. Selon l’exemple précédent, 1 vmax = 10 px.
Pour illustrer les unités relatives au texte, prenons un exemple concret. prenons ce code CSS suivant :
.box{
width : 100vw;
height : 100vh;
}
Cela signifie que le box aura s'élargir sur tout l’espace visible sur l'écran et cela se fera sur tout support. donc le box va s’adapter a tout les écrans
Les autres unités relatives
Les unités en pourcentage (%)
Les pourcentages sont une unité relative, ce qui signifie que leur taille est basée sur la taille de l’élément parent. Cela les rend idéales pour spécifier la taille des éléments les uns par rapport aux autres, comme la largeur d’une barre latérale par rapport à la largeur de la zone de contenu principale. Les pourcentages sont également un bon choix pour créer des mises en page réactives, car ils s'ajustent automatiquement à la taille de l’écran.
Les fractions en css (fr)
L'unité fr, seulement disponible avec le système grid. C’est la contraction de fraction. C’est une unité relative qui repose sur une fraction de l’espace disponible. Et toute la magie entre en scène quand on mixe les tailles fixes de type px et les tailles relatives de type fr
Cette unité peut être utilisée pour dimensionner la largeur des colonnes ou la hauteur des lignes d'une grille. C'est une unité relative à la place restante. Les éléments dimensionnés en fr se répartissent la place restante en fonction de leur nombre de fr.
En conclusion, les unités de mesure CSS sont une partie importante du développement Web et offrent une flexibilité et une adaptabilité dans la conception des mises en page de nos sites web.
Que vous utilisez les pixels, les ems, les rems, les pourcentages, les pouces ou d'autres unités de longueur, il est important de comprendre les différences entre ces unités et de choisir celle qui convient le mieux à votre contexte de développement pour créer des sites Web à la fois visuellement attrayants et réactifs.
Top comments (0)