VW et %

Vous allez me pardonner (je l'espère) mais au fur et à mesure que je publie des pages sur les unités adaptatives, j'en découvre des subtilités et n'ayant rien d'un pro dans le domaine...

Si j'ai bien compris; 1vw=1% de la largeur de l'écran de lecture.

width:1%; = 1% de la largeur de son contenant.

Quelques montages pour vérifier mes dires: cette image est hébergées en 1920x1080px.

Si je la publie en 50vw de large, elle doit s'afficher en 50% de la largeur de l'écran de lecture.

<p style="text-align: center;"><strong><img style="width: 50vw;" src="http://ekladata.com/0XL-yknUnSJEaoiPi5l6tvLjcwE.jpg" alt="" /></strong></p>

Si je remplace les 50vw par 50%, le résultat est le même puisque le contenant (ma zone article=ma page) est affichée en 100% .

Si je place mon image dans un paragraphe centré de 60vw soit 60% de la largeur de mon écran et que je laisse mon image à 50%, la paragraphe mesure, sur mon écran, 60% de 1920px, soit 1152px.

Mon image ayant une largeur de 50% de son contenant, fera 1152/2=676px.

<p style="text-align: center; width: 60%; margin: 0vw auto;"><img style="width: 50%;" src="http://ekladata.com/0XL-yknUnSJEaoiPi5l6tvLjcwE.jpg" alt="" /></p>

Cela signifie que, par exemple, si votre page de blog est affichée à 85%, avec une zone latérale de 300px, selon la largeur de l'écran de lecture, votre zone article mesurera entre:

sur mon écran: 1920px X 85%=1632px et votre zone article fera 1632px-300px=1332px.

Sur un écran en 1440px de large: 1440x85%=1224px et zone article 1224px-300px=924px... etc, etc...

Votre image mesurant 50% de la largeur de cette zone, je vous laisse en calculer la largeur affichée.

Il faut donc comprendre la différence entre vw/vh, qui se réfère à la résolution de votre écran et %, qui se réfère

- soit à la résolution de votre écran, si votre page de blog est à 100% et que vous n'avez pas de rubrique latérale (c'est mon cas mais c'est rare!),

- soit à la largeur de votre zone article ou du contenant.

N'oublions pas que si nous utilisons les unités adaptatives, il faut les utiliser partout dans l'article: dimensions, positionnements, taille police... car si un élément est en pixels, sa dimension ne suivra pas l'évolution de l'article et modifiera l'affichage de l'article.

L'avantage d'utiliser les vw/vh plutôt que les % est que cette unité est acceptée partout, ce qui n'est pas le cas des %.(taille police)

J'espère ne pas avoir écrit trop de bêtises, sur cette page et je compte sur vous pour me les signaler... merci d'avance !