Vous connaissez certainement les unités px, em, rem ou pt pour dimensionner vos corps de texte ? Rajoutez à cette liste :
vw : « Viewport Width », correspond à l’unité relative à la largeur de votre écran
vh : « Viewport Height », correspond à l’unité relative à la hauteur de votre écran
vmin (vm pour IE9) : « Viewport Min », correspond à l’unité relative à la plus petite des deux dimensions (largeur ou hauteur selon l’orientation)
vmax : « Viewport Max », correspond à l’unité relative à la plus grande des deux dimensions (largeur ou hauteur selon l’orientation)
Très bien, mais que représente une unité de vw, par exemple ?
C’est assez simple mais pas forcément intuitif de prime abord : 1 unité représente 1% de la dimension de référence.
h1 {
font-size: 10vw;
}
css html
http://www.creativejuiz.fr/blog/veille-technologique/taille-police-en-fonction-largeur-ecran-viewport#comment-28332
<iframe width="100%" height="452" src="http://snipet.teknotit.com/index.php?embed=54495193950c2" type="text/html"></iframe>
Texte seul - Permalink - Snippet public posté le 23/10/2014