Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

CSS

Structure CSS adaptative

RDFFav

Police de caractères adaptative

Depuis l’arrivée des tablettes et particulièrement du mobile, on ne peu plus concevoir des pages Web avec une seule grandeur de police de caractères. Mais est-ce que les unités « Viewport » sont efficaces?Viewport, Viewport Width, Viewport Height, Viewport Min, Viewport Max, vw, vh, vmin, vmax, @media queries

Depuis l’arrivée des tablettes et particulièrement du mobile, on ne peu plus concevoir des pages Web avec une seule grandeur de police de caractères. Mais est-ce que les unités « Viewport » sont efficaces?

Un caractère trop gros peut être difficile à lire sur un mobile, sans parler de l’espace restreint d’un petit écran. Chris Coyier parle même de l’idéale des 80 caractères par ligne. Il faut absolument ajuster le texte selon la grandeur de l’écran.

Méthode du pourcentage

Il y a plusieurs moyens de modifier la grandeur de caractère pour s’ajuster aux nombreux type et largeur d’écran. Il suffit déjà d’utiliser la vieille unité de pourcentage (%). Avec une valeur relative, em ou %, la taille de la police, la hauteur de la ligne et l’espacement des marges se transmet à tous les décentrants (inherited). Par exemple, ajuster la grandeur de la police sur tous les éléments en changeant seulement la grandeur de la police de l’élément parent. Il suffit de combiner cette méthode avec les @medias query

<style>
.boite h1 {
  font-size: 2em;
  line-height: 140%;
  margin: 0 0 .3em;
}
.boite.petit {
  font-size: 80%;
  line-height: 130%;
}
.boite.gros {
  font-size: 120%;
}
</style>

<div class="boite">
<div class="boite gros">
  <h1>Entête (plus gros)</h1>
  <p>...</p>
</div>
<div class="boite">
  <h1>Entête (normal)</h1>
  <p>...</p>
</div>
<div class="boite petit">
  <h1>Entête (plus petit)</h1>
  <p>...</p>
</div>

Entête (plus gros)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Entête (normal)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Entête (plus petit)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Méthode lourde avec jQuery

On peut sauver les meubles en jQuery avec « FitText ». Mais le CSS3 a maintenant trois unités pour dimensionner les éléments par rapport à la taille actuelle de la fenêtre, les « viewport-percentage lengths » vw, vh et vmin.

Méthode « Viewport »

La longueur de la fenêtre d’affichage est relative à la taille du bloc conteneur initial. Lorsque la hauteur ou la largeur du bloc conteneur est modifiée, les valeurs sont automatiquement mises à l’échelle. Une unité équivaut à 1% de l’axe de la fenêtre. "Viewport" == taille de la fenêtre du navigateur ou de l’objet de la fenêtre. Si la fenêtre est de 40cm de large, 1vw = 0.4cm.

  • 1vw = 1% de la largeur de l’écran (Viewport Width)
  • 1vh = 1% de la hauteur de l’écran (Viewport Height)
  • 1vmin (vm pour IE9) = la plus petite valeur entre la hauteur et la largeur, 1vw ou 1vhr (Viewport Min)
  • 1vmax = la plus grande valeur entre la hauteur et la largeur, 1vw or 1vh (Viewport Max)

Personnellement, je les utilise peu. Je ne voudrais pas gâcher la fête, casser le Party, mais le résultat est souvent inutilisable. Particulièrement pour le petit texte, comme le paragraphe. On voit très bien dans l’exemple suivant que le texte en « font-size: 2vmin » est gros, quasiment trop, alors que sous mobile il est beaucoup trop petit.

Exemple

font-size: 2vmin - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-size: 2vw - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

font-size: 2vh - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Capture d’écran
Texte en font-size: 2vmin
Firefox 40 - Texte en font-size: 2vmin

Une affaire d’orientation et de proportion

Ouf, dur dur! Un paragraphe à 2vw sort pas mal en paysage sur mon mobile. Mais le texte est bien trop gros sur mon PC! En fait, la plupart de mes tests sont autant de surprise. J’imagine qu’il faudrait le travailler comme une sculpture pour trouver les bonnes proportions. Mais une chose certaine, les nombreuses probabilités permettent un contrôle pointu des grandeurs selon l’orientation de l’écran du mobile. Dans l’exemple suivant, le commentaire (blockquote) sort pas mal en « font-size: 3.0vh » mes seulement en orientation portrait! C’est donc essentiellement une affaire de proportion, ce qui en fait une technique flexible mais difficile à manipuler et à tester. Il faudrait sans doute y jeter un œil intéressé un de ses quatre et établir des mesures et pourquoi ne pas créer un standard facile à reproduire!

Si la grandeur de la police n’est pas à la hauteur, rien ne vaut l’unité « Viewport » pour ajouter une marge relative à la largeur de l’écran. C’est là que je l’utilise beaucoup. Par exemple une marge de 1.5vw en haut d’un objet margin-top:1.5vw

Sinon, pour l’utiliser conjointement sur un ordinateur de bureau, plus le texte est gros, et plus l’unité Viewport sied au mobile. Les gros textes d’accueil, les « hero ».

<style>
h1.hero {font-size: 5.9vw;}
blockquote.commentaire {font-size: 3.0vh;}
</style>

<h1 class="hero">Un gros titre à 6% de la largeur de la fenêtre</h1>
<blockquote class="commentaire">Et un commentaire à 3% de la hauteur de la fenêtre.</blockquote>
Résultat avec le commentaire
Exemple
font-size: 3.0vh - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Capture d’écran
Commentaire en font-size: 3.0vh
Firefox 40 - Commentaire en font-size: 3.0vh

@medias query

En attendant, il suffit des « médias queries » pour en venir à bout! Aussi bien se contenter ...des « médias queries »!

Voilà la solution que j’utilise le plus souvent. Et je ne me casse pas la tête en laissant tomber la plupart des dimensions. Je me contente de deux grandeurs, normale et mobile! Quant aux paragraphes, aucune modification. Le texte sous mobile peut très bien garder la même grandeur.

Noter que l’important est le H1, H2 et H5. Comme on peut voir, vaut mieux ajuster la hauteur des lignes (line-height) par la même occasion.

<style>
/* Mobile en premier */
.h1 {
  font-size: 20px;
  line-height: 30px;
}
@media (min-width: 767px) {
  .h1 {
    font-size: 30px;
    line-height: 42px;
  }
}
</style>
Un peu de fluidité...
<style>
/* Mobile en premier */
.h1 {
  font-size: 20px;
  line-height: 30px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
@media (min-width: 767px) {
  .h1 {
    font-size: 30px;
    line-height: 42px;
    font-weight: 500;
  }
}
</style>
Exemple
<style>
/* Mobile en premier */
h1 {font-size: 30px;font-weight: 500;line-height: 40px;}
h2 {font-size: 24px;font-weight: 500;line-height: 32px;}
h3 {font-size: 20px;font-weight: 500;line-height: 28px;}
h4 {font-size: 18px;font-weight: 500;line-height: 26px;}
h5 {font-size: 16px;line-height: 20px;font-weight: 500;}
h6 {font-size: 14px;line-height: 16px;font-weight: 500;}
@media (min-width: 767px) {
  h1 {font-size: 40px;line-height: 52px;font-weight: 500;}
  h2 {font-size: 32px;line-height: 42px;font-weight: 500;}
  h3 {font-size: 26px;line-height: 38px;font-weight: 500;}
  h4 {font-size: 24px;line-height: 36px;font-weight: 500;}
  h5 {font-size: 20px;line-height: 32px;font-weight: 500;}
  h6 {font-size: 16px;line-height: 20px;font-weight: 500;}
}
// Unité « Viewport Width »
h1.hero {font-size: 5.9vw;}
blockquote.commentaire {font-size: 3.0vh;}
</style>

Voir l’exemple dans une nouvelle page

H1 « Viewport Width » (font-size: 5.9vw)


H1 Medias Queries

H2 Medias Queries

H5 Medias Queries

Paragraphe par défaut - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

9/10 sur 1 revues.
       Visites : 671 - Pages vues : 720
X

Trucsweb.com Connexion

X

Trucsweb.com Mot de passe perdu

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte