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.
Les pixels sont l'unité CSS la plus couramment utilisée et acceptée . Et il est considéré comme la base de mesure de nombreuses autres unités. Il fournit le résultat le plus cohérent parmi les différents appareils. L'élément box dans l'exemple suivant a une hauteur de 150 px et une largeur de 150 px, et il restera le même sur toutes les tailles d'écran.
CSS offre différentes unités pour exprimer les dimensions. Certaines proviennent de la typographie, comme le point ( pt ) et le pica ( pc ), d'autres sont connues pour leur usage quotidien, comme le centimètre ( cm ) et le pouce ( in ).
Notez qu'il est déconseillé d'utiliser les unités cm et in et qu'il est recommandé de privilégier les unités de mesure px et % (en ce qui concerne les unités de mesure traditionnelles - nous verrons dans la suite qu'il existe des unités plus intéressantes).
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.
Avantages des rem :
En utilisant les rem, vous avez un meilleur contrôle sur l'affichage de votre site web sur différentes tailles d'écrans, ce qui est crucial pour assurer un site responsive et une expérience utilisateur optimale.
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 ».)
Utilisez px lorsque vous avez besoin d'éléments de taille fixe qui ne changeront pas, comme pour les bordures ou les ombres . Utilisez rem pour les tailles de police afin de le rendre plus accessible aux utilisateurs qui ont modifié la taille de police par défaut de leur navigateur.
EM est relatif à la taille de police de l'élément parent , donc si vous souhaitez redimensionner la taille de l'élément en fonction de la taille de son parent, utilisez EM. REM est relatif à la taille de police racine (HTML), donc si vous souhaitez redimensionner la taille de l'élément en fonction de la taille racine, quelle que soit la taille parent, utilisez REM.
La largeur minimale que votre écran peut afficher est de 1 pixel . Il est donc impossible d'afficher moins de 1 px. 1 pixels ne peuvent avoir qu’une seule couleur et ne peuvent pas être divisés.
En CSS, vh signifie viewport height et vw pour viewport width . Comme vous pouvez le voir, la première unité est basée sur la hauteur de la fenêtre et 1vh équivaut à 1 % de la hauteur de la fenêtre. vw fonctionne de la même manière, mais pour la largeur de la fenêtre. Ainsi, 1vw équivaut à 1 % de la largeur de la fenêtre.
Vous pouvez les utiliser comme unité de mesure en HTML et CSS pour définir la taille du texte . La taille de 'em' dépend de la taille de la police de l'élément parent. Cela signifie que si vous définissez la taille de police de l'élément parent sur 20 px et celle d'un enfant sur 1,5 em, l'enfant aura une taille de police de 30 px (1,5 * 20).
vw signifie Viewport width et représente un pourcentage de la largeur de la fenêtre. Le nombre placé avant vw est le pourcentage de la largeur de la fenêtre que cette longueur sera . Par exemple, si vous écrivez 10vw, cela représentera une longueur de 10 % de la largeur de votre fenêtre.
Par exemple, si vous souhaitez définir la marge de propriété d'un paragraphe, vous lui attribuerez une valeur spécifique. Cette valeur inclut l'unité CSS. Dans ce cas, margin est la propriété, 20px ; est la valeur et px (ou « pixel ») est l'unité CSS .
Les unités réactives sont les éléments de base que les développeurs utilisent pour définir les tailles et les espaces au sein d'une mise en page Web qui peuvent évoluer de manière fluide, ce qui donne à la conception une belle apparence sur n'importe quel appareil . Contrairement aux unités fixes comme les pixels (px), les unités relatives adaptent leur taille en fonction de l'élément parent ou des paramètres de l'appareil de l'utilisateur.
Afin de garantir une utilisation cohérente des espaces dans toute l'application, étant donné qu'un composant peut être utilisé dans divers contextes, il peut être préférable d'utiliser rem pour la marge et le remplissage plutôt que em .
L'utilisation de REM (ou d'une autre valeur de longueur relative) pour la taille de la police est indispensable pour l'accessibilité, car px dans certains navigateurs ne se redimensionne pas lorsque les paramètres du navigateur sont modifiés. Certaines personnes, par exemple, doivent zoomer jusqu'à 400 % pour pouvoir lire votre texte, en raison d'une déficience visuelle.
rem : Aide à préserver la lisibilité car les utilisateurs peuvent ajuster la taille de la police racine en fonction de leurs préférences. % : Les pourcentages imbriqués peuvent parfois créer des tailles très petites ou très grandes, nuisant potentiellement à l'accessibilité.
Dans cet exemple, la taille de la police de l'élément est définie sur 14 pixels et la marge supérieure est définie sur 20 pixels. En conclusion, le choix de l'unité dépend des besoins spécifiques du projet. Rem est utile pour créer des conceptions évolutives, em est utile pour créer des conceptions réactives et px est utile pour les éléments de taille fixe .
It basically concluded by saying that EM units and REM units are going to be better for media queries than pixel units and because EM units are based on their parent element, but media queries affect the root styles, both EM and REM are pretty much the same.
Il est possible d'écrire du code CSS dans l'entete d'un document HTML, dans la balise >head>. Il suffit pour cela de l'encadrer par une balise >style> ayant pour attribut type="text/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 .
Comme cela a été évoqué précédemment, l'utilisation de CSS permet d'alléger le code HTML. Cela accélère le temps de chargement de la page. C'est un élément à ne pas négliger. De plus, le CSS permet d'uniformiser le site de plusieurs manières, notamment la police, la taille et la couleur du texte.
1 rem = 16 pixels .
Le em ne concerne pas seulement la taille de la police. Il s'agit d'une unité relative que vous pouvez utiliser pour définir les valeurs de propriétés telles que la taille de la police, la marge, le remplissage, la largeur, la hauteur et la hauteur de ligne d'un élément. Le rem est la racine em . Toutes les valeurs sont relatives au parent le plus haut, l'élément html ou :root.