Agrandissement des caractères - Démonstrations

Unités relatives VS unités fixes

Conforme : taille de police en unités relatives

Ce paragraphe possède une taille de police définie en em (unité relative). Ce texte s'agrandira dans tous les navigateurs.

p{
 font-size:1em;
}

Non conforme : taille de police en unités fixes

Ce paragraphe possède une taille de police définie en pixel (unité fixe). Dans Internet Explorer, ce texte ne s'agrandit pas.

p{
 font-size:16px;
}

Équivalence des tailles de polices en em

Le texte contenu dans cette boîte possède une taille de police calculée 16px. Il est l'élément parent des deux blocs suivants. Ce texte imbriqué possède une taille de police équivalente à 24px. Ce texte imbriqué possède une taille de police équivalente à 18px.

body{
 font-size:100%; /** 100% = 1em = 16px **/
}

.em1{
 font-size:1em; /** 16px / 16 = 1 **/
}

 .em2{
	font-size:1.5em; /** 24px / 16 = 1.5 **/
 }

 .em3{
	font-size:1.125em; /** 18px / 16 = 1.125 **/
 }

Tailles de polices en px

Le texte contenu dans cette boîte possède une taille de police de 16px. Il est l'élément parent des deux blocs suivants. Ce texte imbriqué possède une taille de police de 24px. Ce texte imbriqué possède une taille de police de 18px.

body{
 font-size:100%;
}

.pixel1{
 font-size:16px;
}

 .pixel2{
	font-size:24px;
 }

 .pixel3{
	font-size:18px;
 }

Lisibilité du texte à 200% : problème des hauteurs fixées en pixel

Agrandissez la taille des caractères (Ctrl + 6 fois) et constatez l'agrandissement ou la disparition du texte.

Adaptatif : hauteur minimale en pixel

Cette boîte possède une hauteur minimale. Lorsque la taille de la police augmente, la hauteur de la boîte s'adapte au contenu qui reste lisible.

p{
 min-height:150px;
}

Problématique : hauteur fixée en pixel

Cette boîte possède une hauteur fixée. Lorsque la taille de la police augmente, le texte déborde, chevauche le contenu qui le suit et devient illisible.

p{
 height:150px;
}

Gérer les débordements

Agrandissez la taille des caractères (Ctrl + 6 fois) et constatez l'agrandissement ou la disparition du texte.

Adaptatif : overflow:auto

Cette boîte possède la propriété overflow dont la valeur est auto.

p{
 height:80px;
 overflow:auto;
}

Problématique : overflow:hidden

Cette boîte possède la propriété overflow dont la valeur est hidden.

p{
 height:80px;
 overflow:hidden;
}

Les retours automatiques

Agrandissez la taille des caractères (Ctrl + 6 fois) et constatez l'agrandissement ou la disparition du texte.

Adaptatif : Laisser le texte revenir à la ligne

Ce texte sera redistribué normalement à l'agrandissement des caractères.

p{
 white-space:initial;/** valeur par défaut **/
}

Problématique : Empêcher le retour à la ligne

Ce texte va déborder à l'agrandissement des caractères.

p{
 white-space:nowrap;
}

Responsive et agrandissements des caractères

  1. Réduisez la taille de la fenêtre pour voir chacun des groupes de deux colonnes se repositionner.
  2. Revenez à une largeur suffisante.
  3. Agrandissez la taille des caractères (Ctrl + 6 fois) et constatez les repositionnements.

    Adaptatif : media-queries en em

    Ces 2 colonnes vont se repositionner lorsquela taille de l'écran sera de 767px ou moins et de 47.9375em ou moins

    .colonne{
 display:inline-block;
 width:49%;
 background:#f2f2f2;
}

@media-screen and (max-width:47.9375em){
 .colonne{
  display:block;
  width:100%;
 }
}

    Problématique : media-queries en pixels

    Ces 2 colonnes vont se repositionner lorsquela taille de l'écran sera de 767px

    .colonne{
 display:inline-block;
 width:49%;
 background:#f2f2f2;
}

@media-screen and (max-width:767px){
 .colonne{
  display:block;
  width:100%;
 }
}