unités adaptatives et fixes

J'ai voulu me rendre compte des différences d'affichages et d'utilisation de 3 unités:

- les pixels, qui sont une unité de valeur fixe, quelle que soit la résolution de l'écran de lecture.

- les % qui sont une valeur relative par rapport au contenant (page ou cadre)

- les unités viewport (vw= % largeur et vh=% hauteur), valeur relative par rapport à la résolution de l'écran de lecture.

<div style="width: 40vw; height: 20vw; margin: 2vh auto; border: 0.4vh solid red;">
<div style="float: left; width: 30%; height: 60%; border: 0.4vh solid green; text-align: center; margin: 8% 5% 0% 14%;">
<p style="width: 150px; height: 150px; background: yellow; margin: 35px;">&nbsp;</p>
</div>
<div style="float: left; width: 30%; height: 60%; border: 0.4vh solid green; text-align: center; margin: 8% 0% 0% 5%;">
<p style="width: 150px; height: 150px; background: lime; margin: 35px;">&nbsp;</p>
</div>
</div>

Sur un écran de 1920px par 1080px:

Sur un écran de 1024px par 600px:

Comme vous le voyez, les unités adaptatives (vw et %) se sont adaptées à la résolution de l'écran de lecture mais pas les pixels (carrés jaune et vert).

Un mélange de ces unités n'est donc pas à conseiller si vous voulez que vos visiteurs voient la même chose que vous.

Si vous voulez mélanger des unités viewport et des %, il vous faut d'abord utiliser les unités vw qui se réfèrent à la largeur de l'écran et dedans, des %.

Si vous faites l'inverse, votre cadre en % va se référer à la largeur de votre zone article(partie de votre page de blog) et dedans, les vw vont prendre en référence la largeur de l'écran, qui est plus grande.

Vous remarquerez que j'ai utilisé des unités vh en épaisseur de bordure car les % ne sont pas acceptés.