Easy-Micro


TECHNIQUE Responsive Web Design
Texte responsive

Techniques pour avoir un texte responsive

Responsive web design 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.

Responsive web design 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 }

En REM :
p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }

Responsive web design 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'écran

Technique 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;
}
}

Responsive web design Pour aller plus loin...



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Samedi 15 juin 2019 - Semaine 24 - Sainte Germaine (Demain: Saint Jean-François)
Aujourd'hui, c'est l'anniversaire de Johnny Hallyday (1943-2017), Jean-Philippe Smet est chanteur, compositeur et acteur belge.
Haut de page Easy-Micro