Responsive Web DesignTexte responsive
Techniques pour avoir un texte responsive
EM : la taille du texte par défaut du navigateur
Pour améliorer l'accessibilité d'un site web, il faut permettre le redimensionnement du texte, afin qu'il s'adapte aux résolutions et aux paramètres des utilisateurs. Pour cela, on utilise l'unité relative em (appelée cadratin en typographie française).1em correspond à une hauteur de ligne de 1 caractère, soit 12pt si l'utilisateur n'a pas modifié la taille standard des caractères. Si l'utilisateur modifie la taille par défaut des caractères (avec CTRL + et CTRL -, par exemple), les valeurs définies en "em" varieront en conséquence.
Attention cependant, si la propriété font-size est définie, elle se rapporte à la taille de la police de l'élément parent.
Code CSSS :
html { font-size: 100%; } // correctif pour IE
body { font-size: .8em; }
Note : l'instruction CSS "html{font-size:100%;}" est un correctif pour un bug d'Internet Explorer qui rend anarchique le redimensionnement du texte à la volée.body { font-size: .8em; }
REM : taille du texte dans l'élément racine du document
Pour rendre encore plus facile le fait d'écrire des règles de style qui ne dépendent que de la taille de la police par défaut, CSS a introduit une unité depuis 2013: Le rem. Le rem (pour "root em") est la taille de la police de caractères dans l'élément racine du document. Contrairement au em, qui peut être différent pour chaque élément, le rem est constant tout au long du document.Exemple pour définir la même marge gauche pour les éléments P et H1 :
En EM :
p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }
h1 { font-size: 3em; margin-left: 0.333em }
En REM :
p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }
VW : un texte qui s'adapte automatiquement à la taille de l'écran
Deux techniques simple pour qu'un texte s'adapte automatiquement à la taille de l'écranTechnique 1 : L'utilisation des unités vw ou vh :
Viewport Width, correspond à l'unité relative à la largeur de votre écran
Viewport Height, correspond à l'unité relative à la hauteur de votre écran
<div style="font-size:2vw;">Redimensionnez la fenêtre de votre navigateur</div>
Si votre ecran fait 768px de large, la taille du texte à l'intérieur de votre div est de (768 * 2/100) = 15px
Technique 2 : L'utilisation des Media Queries CSS:
/* Si la taille de l'écran est de 601 ou plus, on met la taille du texte à 80px */
@media screen and (min-width: 601px) {
div.exemple {
font-size: 80px;
}
}
/* Si la taille de l'écran est de 600px ou moins, on met la taille du texte à 30px */
@media screen and (max-width: 600px) {
div.exemple {
font-size: 30px;
}
} Pour aller plus loin...
- Grafikart.fr
- Test responsive chez Mattkersley.com (à tester avec le site de l'Elysée ou avec celui de Fredjay)
