Adaptatif

Je reviens sur ces unités, qui s'adaptent à la résolution de l'écran de lecture et auquel, je le crois, il faudra s'habituer.

Les unités que je connais sont les % et les unités viewport :vw en largeur et vh en hauteur.

Les % ne fonctionnent pas en positionnement (transform:translate(Y%,X%);) contrairement au vw/vh et je ne parlerai que de ces dernières.

Même si, au début, c'est un peu déstabilisant, on s'habitue vite car, nos articles sont souvent de la même structure et une fois les valeurs qui nous conviennent sont déterminées, on n'en bouge plus !

1vw est l'équivalent de 1% de la résolution  de l'écran de lecture, en largeur.

1vh est l'équivalent de 1% de la résolution  de l'écran de lecture, en hauteur.

Vous pouvez donc vous faire une idée de ces valeurs, si vous connaissez la résolution de votre écran: exemple:

écran de 1366x768px: 0.1vw=1.366px/1vw=13.66px/10vw=136.6px  et 0.1vh=0.738px/1vh=7.68px/10vh=76.8px.

mais cela ne vous servira pas plus que de revenir au franc avec des prix en euros !

Il me semble que, tout d'abord, vous devez tester quelle largeur en vw est possible dans votre zone article; pour cela, rien de plus simple !

Ouvrez votre code source, en création d'article (icône <>) et écrivez:

<p style="width:50vw; height:20vh; margin:0vh auto; border:0.1vh solid black;">&nbsp;</p>

Un cadre de 50vw de largeur va s'afficher: trop grand ou trop petit ? A vous de modifier la valeur 50vw jusqu'à obtenir une largeur compatible avec la largeur de votre zone article.

Pour la hauteur, le défilement vertical ne limitant pas cette valeur, vous ajusterez en fonction de votre article.

Si vous voulez vous simplifier la vie et moins calculer les valeurs: une image est désormais au ratio 16/9, c'est à dire de 16px de large par 9px de haut.

Si vous dimensionnez votre image en 16vw de large, vous pouvez utiliser la même unité, pour la hauteur, soit, pour conserver le ratio: 9vw, comme vous le faites avec les px.

Bien sûr, vous jouerez avec les multiples et sous-multiples: exemple: width:32vw et hauteur 18vw:

<p><img style="width:32vw; height:18vw;" src="http://ekladata.com/YOdoKxbNyJR4Fv10b52oCts6QjE.jpg"></p>

Cette image conserve son ratio mais est en unités adaptatives et sera affichée, sur tout écran,  32% de sa largeur

***************

Ces unités étant acceptées en positionnement, taille police, largeur bordure..., vous ajusterez au coup par coup.

Si votre cadre fait 32vw par 18vw, les références, comme avec les pixels, sont l'angle haut/gauche donc le bord haut et le bord gauche.

A vous de déterminer où vous voulez afficher un élément, dans ce cadre: exemple:

<div style="width: 32vw; height: 18vw; margin: 0vh auto; border: 0.1vh solid black;">
<p style="width: 5vw; height: 5vw; background: red; transform: translate(2vw,2vw);">2vw du haut et 2vw de la gauche.</p>
</div>

Cependant, si vous utilisez des unités adaptatives, utilisez-les pour chaque élément ou positionnement, sans panacher avec des pixels car le programme adaptera la partie adaptative mais pas la fixe (pixel) et des éléments pourraient être hors cadre.