Le Small, le Large, & le Dynamic

Eh oui, en fait vh et vw ce n'est pas assez, parce que les téléphones on un viewport à taille variable à cause de la "nav bar" et de la barre d'adresse du navigateur. Si vous donnez 100vh à un élément, il peut se retrouver sous la nav bar.

C'est pour ça qu'il faut passer à svh, lvh et dvh.

• svh représente la hauteur du viewport lorsque les barres sont sorties et que donc le viewport est au plus petit (ce qui est le cas quand on ouvre une page)
• lvh est l'inverse, toutes les barres sont rentrées et le viewport est à sa taille maximale
• dvh va changer dynamiquement et sera égal à svh quand les barres seront complètement sorties et égal à lvh quand toutes les barres seront complètemnet rentrées.

vh étant presque comme lvh à quelques petites exception près, il faut donc ne plus l'utiliser, à la faveur de ces unitées beaucoup plus claires.

Aussi, il faut resister à la tentation de tout faire avec dvh parceque plus vous aller faire de choses avec, plus votre interface va gigoter au premier scroll et risque aussi de rammer si les changements de tailles déclenchent beaucoup de recalculs de mise en page.