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 20 mars 2019 - Semaine 12 - Saint Herbert (Demain: Sainte Clémence)
Aujourd'hui, c'est l'anniversaire de Danièle Gilbert (1943-76 ans), animatrice de télévision française et de Marthe Villalonga (1932), actrice française. Autre 20 mars: 1815 : de retour de l'île d'Elbe et après une marche triomphale sur Paris, Napoléon entre dans la capitale. 1965 : France Gall gagne l'Eurovision pour le Luxembourg avec Poupée de cire poupée de son.
Haut de page Easy-Micro