CSS3 a de nouvelles valeurs pour le dimensionnement des objets par rapport à la taille actuelle de la fenêtre: VW, VH, et vmin. Elles permettent entre autres d'avoir une taille de police et des colonnes variables selon la résolution de l'écran. Lors de la réduction du corps de la fenêtre votre titre se réduira suivant le schéma initialement prévu.

L'unité de vh signifie "hauteur de la fenêtre", vw pour viewport width, et vmin représente celui des vh ou vw est la plus courte longueur.

Les valeurs utilisées peuvent être quelque peu déroutantes si vous n'avez pas utilisé ces unités avant. 1VH représente 1% de la fenêtre courante (la zone de contenu de la fenêtre du navigateur) de hauteur, au lieu de 100% comme vous pouvez vous y attendre. 

Donc si vous voulez un élément à la hauteur de votre fenêtre, vous devrez le mettre à 100vh. Bien sûr VW fonctionne exactement de la même manière que les unités de VH.

En résumé:

1vw = 1% de la largeur de la fenêtre

1VH = 1% de la hauteur de la fenêtre

1vmin = 1vw ou 1VH, soit la valeur la plus petite

1vmax = 1vw ou 1VH, soit la valeur la plus grande

Les unités de fenêtres sont dynamiques plutôt que statiques, donc si vous redimensionnez la fenêtre du navigateur, la valeur calculée des unités changera également.

Si par exemple la fenêtre de votre navigateur est 1000px de large, et l'élément d'une largeur de 10vw sera 100px de large.

Si vous réduisez la fenêtre du navigateur pour seulement 100px de large, la largeur de l'élément sera redimensionné avec elle pour 10px de large.

Le réglage de la hauteur et largeur des éléments pour correspondre à la taille de la fenêtre du visiteur devient trivial.

Exemple de code:

zone > section {

    column-width: 15em;

    column-gap: 1.6rem;

    height: 80vh;

    width: 80vw;

    overflow: scroll;

}

Ceci définit la hauteur à 80% de la hauteur de la fenêtre, et la largeur à 80% de la largeur de la fenêtre.

La largeur de chaque colonne est réglée pour être idéalement 22rem (220px dans ce cas) de large, mais le navigateur peut ajuster selon la nécessité.

Enfin, le débordement est mis en défilement afin que des colonnes supplémentaires soient cachées et puissent être parcourues selon leur apparition, plutôt que de déborder vers la droite, et potentiellement chevaucher tout élément que nous plaçons là.

Grace à ceci vous aurez un début de design sensible aux redimensionnements correspondant totalement à la vision voulue sans avoir à toucher aux pourcentages de chaque élément.

Attention aux navigateurs cependant, cette technologie récente n'est pas forcement compatible partout.

Pour connaitre les navigateurs qui supportent cette fonctionnalité : http://caniuse.com/#feat=viewport-units