Easy-Micro


TECHNIQUE Responsive Web Design
Texte responsive

Un texte qui s'adapte à 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;
}
}

Pour aller plus loin...


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mercredi 16 janvier 2019 - Semaine 03 - Saint Marcel (Demain: Sainte Roseline)
Aujourd'hui, c'est l'anniversaire de Richard Bohringer (1942-77 ans), acteur (subway, Diva, Le grand chemin...), réalisateur (2006 : C'est beau une ville la nuit, d'après son livre publié en 1988), chanteur et écrivain français. Autre 16 janvier: 1920 - L'alcool est prohibé aux Etats-Unis.
Haut de page Easy-Micro