Grosseur de la typographie suivant le « viewport »

Attention ! Cet article a plus de 1 an (3091 jours), ce qui signifie qu'il n'est pas forcément à jour !

CSS3 a ajouté de nouvelles valeurs pour ajuster la grosseur des choses en relation avec la grosseur du « viewport » : vw, vh et vmim.

Un unité de l’une de ces 3 valeurs équivaut à 1% sur l’axe du « viewport ». Donc si le viewport est de 30cm de large, 1vw est égal à 0.3cm.

1vw = 1% de la largeur du viewport 1vh = 1% de la hauteur du viewport 1vmin = 1vw ou 1vh, selon le plus petit 1vmax = 1vw ou 1vh, selon le plus large

Son utilisation est aussi simple que :

h1 { font-size: 5.9vw; }
h2 { font-size: 3.0vh; }
p { font-size: 2vmin; }

** Nous devons porter attention au fait que l’ajustement ne se fait pas en agrandissant la fenêtre ou en la rapetissant mais bien au rafraîchissement de la page.

Il existe des méthodes pour forcer le redimensionnement suivant celui de la fenêtre. Voici un code simple en utilisant jQuery :

causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
      causeRepaintsOn.css("z-index", 1);
});

Vous pouvez utiliser ces valeurs aux mêmes places que vous utiliseriez em et px. Nous pouvons souvent utiliser % au lieu de ces unités, tout dépend si nous avons besoin que notre élément réagisse au redimensionnement de la fenêtre ou tout simplement des dimensions de son parent direct.

Pour une solution plus design et graphique vous pouvez utiliser aussi fitText.js

Catégories :

HTML CSS Javascript