CSS => Unités de longueur

Introduction

Une mesure de distance CSS est un nombre immédiatement suivi d'une unité de longueur (px, em, pc, in,…)

CSS prend en charge un certain nombre d'unités de mesure de longueur. Ils sont absolus ou relatifs.

Syntaxe

unité de valeur
1em

Paramètres

Unité	La description
%	Définir les tailles en termes d'objets parents ou d'objet en cours dépendant de la propriété
em	Relatif à la taille de la police de l'élément (2em signifie 2 fois la taille de la police en cours)
rem	Relatif à la taille de la police de l'élément racine
vw	Relatif à 1% de la largeur de la fenêtre d'affichage *
vh	Relatif à 1% de la hauteur de la fenêtre d'affichage *
vmin	Par rapport à 1% de la dimension * de la fenêtre d'affichage
vmax	Par rapport à 1% de la plus grande dimension de la fenêtre d'affichage *
cm	centimètres
mm	millimètres
dans	pouces (1in = 96px = 2.54cm)
px	pixels (1px = 1 / 96ème de 1in)
pt	points (1pt = 1/72 de 1in)
pc	picas (1pc = 12 pt)
s	secondes (utilisé pour les animations et les transitions)
Mme	millisecondes (utilisé pour les animations et les transitions)
ex	Relatif à la hauteur x de la police actuelle
ch	Basé sur la largeur du caractère zéro (0)
fr	unité fractionnaire (utilisée pour la disposition de grille CSS)

Remarques

Un espace ne peut pas apparaître entre le nombre et l'unité. Cependant, si la valeur est 0, l'unité peut être omise.
Pour certaines propriétés CSS, les longueurs négatives sont autorisées.

Taille de la police avec rem

CSS3 introduit quelques nouvelles unités, y compris l'unité rem , qui signifie "root em". Regardons comment fonctionne rem .

Tout d'abord, regardons les différences entre em et rem .

em : par rapport à la taille de la police du parent. Cela provoque le problème de la composition
rem : par rapport à la taille de la police de l'élément root ou <html> . Cela signifie qu'il est possible de déclarer une taille de police unique pour l'élément html et de définir toutes les unités rem comme pourcentage.

Le principal problème avec l'utilisation de rem pour le dimensionnement des polices est que les valeurs sont quelque peu difficiles à utiliser. Voici un exemple de taille de police commune exprimée en unités rem , en supposant que la taille de base est 16px:

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

CODE:

html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}

Création d'éléments évolutifs à l'aide de rems et ems

Vous pouvez utiliser rem défini par la font-size de la font-size de votre balise html pour personnaliser les éléments en définissant leur font-size à une valeur rem et en utilisant em dans l'élément pour créer des éléments adaptés à votre font-size globale.

HTML:

<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

CSS pertinent:

html {
  font-size: 16px;
}

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;
}

input[type="range"] {
  font-size: 1rem;
  width: 10em;
}

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;
}

Résultat possible:

vh et vw

CSS3 a introduit deux unités pour représenter la taille.

vh , qui signifie que la viewport height d' viewport height est relative à 1% de la hauteur de la fenêtre d'affichage
vw , qui signifie que la viewport width est relative à 1% de la largeur de la fenêtre d'affichage

div { 
  width: 20vw; 
  height: 20vh;
}

Au-dessus, la taille de la div occupe 20% de la largeur et de la hauteur de la fenêtre

vmin et vmax

vmin : par rapport à 1% de la plus petite dimension de la fenêtre d' affichage
vmax : par rapport à 1% de la plus grande dimension de la fenêtre d' affichage

En d'autres termes, 1 vmin est égal au plus petit de 1 vh et 1 vw

1 vmax est égal au plus grand de 1 vh et 1 vw

Remarque : vmax n'est pas pris en charge dans:

toute version d'Internet Explorer
Safari avant la version 6.1

en utilisant le pourcentage%

Une des unités utiles lors de la création d'une application réactive.

Sa taille dépend de son conteneur parent.

Équation:

(Largeur du conteneur parent) * (Pourcentage (%)) = Sortie

Par exemple:

Le parent a une largeur de 100px alors que l' enfant a 50% .

En sortie , la largeur de l' enfant sera la moitié (50%) de celle du parent , soit 50 pixels .

HTML

<div class="parent">
   PARENT
   <div class="child">
     CHILD
   </div>
</div>

CSS

<style>

*{
  color: #CCC;
}

.parent{
  background-color: blue;
  width: 100px;
}

.child{
  background-color: green;
  width: 50%;
}

</style>

SORTIE

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

CSS
Unités de longueur

Recherche…