Utiliser des unités adaptatives

Il semble que l'emploi des unités adaptatives (% ou viewport) soit une chose compliquée pour certain(e)s et je voudrais revenir sur le principe.

Au début, pour maîtriser la chose, il faut connaître 2 choses: la largeur de votre écran en pixel et la largeur de votre zone article en pixel; cela vous permettra de convertir en pixel les unités adaptatives mais vous l'oublierez vite car le but de ces unités est d'afficher, de la même manière, un élément, quelle que soit l'écran de lecture.

La largeur de votre écran, quelle que soit sa largeur en pixels, est égale à 100% ou 100vw; je ne reviendrai que sur les unités viewport (vw/vh) qui sont acceptées partout (semble-t-il) par les navigateurs et dans les attributs... contrairement aux %.

Les unités viewport sont vw (viewport largeur:wide) et vh (viewport hauteur:height) mais, à l'usage, il est plus simple de n'utiliser que VW pour les dimensions et position et uniquement les vh pour les bordures, puisque les dimensions sont plus faibles.

1 vw=1% de la largeur de votre écran et 1 vh=1% de la hauteur de votre écran; le mien fait 1920px par 1080px donc 1vw=19.2px et 1 vh=10.8px.

La largeur de votre blog et de votre zone article, vous les avez paramétrées en configuration de votre blog.

Afin que votre blog s'adapte à la largeur de l'écran de vos visiteurs, il est conseillé de paramétrer cette largeur en 100%; l'affichage va ajuster la largeur des rubriques et polices en fonction de l'écran de lecture mais pas les éléments paramétrés en pixels (image, par exemple).

Vous avez défini le nombre de menus (droite/gauche) et, par conséquence, la largeur de votre zone article qui est la largeur totale - les largeurs de vos menus.

Mon exemple sera mon blog, avec un menu à droite de 150px de large ... et la difficulté commence ! car votre blog est en 100% et la largeur de votre menu en pixels !

Mon blog fait 100% de large soit 1920px sur mon écran; mon menu fait 150px soit 12.8% de la largeur de mon blog; ceci détermine donc la largeur de ma zone article:100% -12.8%=87.2%.

Je ne pourrais donc afficher en totalité que des éléments en 87vw de large ce qui vous explique pourquoi mes montages sont proposés en 80vw de large.

Pour la hauteur, le ratio de mes images étant en 16/9, pour une largeur de 80vw, la hauteur relative sera de 45vw.

La majorité des blogs acceptent des largeurs de 60% soit 60vw en largeur; vous pouvez calculer ce qu'accepte votre blog et conserver la valeur maxi pour tout vos montages.

Une fois cette valeur déterminée, vous la conserverez sans la modifier: plus de calcul à faire.

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

Voilà pour la partie zone article; voyons le positionnement d'un élément dans un cadre de 60vw par exemple.

Un élément de 10vw de large sera contenu 6 fois dans la largeur, sans espace.

Si vous voulez séparer chaque élément de 2vw, vous aurez vos 6 éléments + 7 espaces; soit 14vw pour les espaces et donc 60-14=46 vw pour vos 6 images ou environ 7.5vw par image.

Si la hauteur de votre article n'est pas définie, la molette de souris vous permet ne naviguer; par contre, si la hauteur d'un cadre, par exemple, est définie, il vous faudra calculer de la même façon les dimensions et positionnements des éléments en hauteur.

Comme avec des pixels, il vous faudra faire des essais, avec des valeurs différentes pour obtenir le résultat que vous souhaitez.

Bon assez de texte, passons aux travaux pratiques ! Voici un générateur où vous pouvez modifier différents paramètres de dimension et de positionnement.

A vous de tester de te reporter sur votre blog.

Mode d'emploi du générateur:

Les 3 cadres colorés peuvent être être positionné comme bon vous semble et leur position, après essai, peut être recopiée dans un code du genre:

 <div style="width: 60vw; height: 45vw; margin: 1vh auto; border: 0.1vh solid black; background: aqua;">
<p id="essai1">&nbsp;</p>
<p id="essai2">&nbsp;</p>
<p id="essai3">&nbsp;</p>
</div>

<style><!--
 #essai1{ position:absolute; z-index:5;
background:lime; border: 0.6vh solid yellow; width:16vw;height:9vw; transform:translate(2vw,2vw); transition:all 1s linear;}
#essai2{ position:absolute; z-index:5;
background:yellow; border: 0.6vh solid black; width:16vw;height:9vw; transform:translate(22vw,2vw); transition:all 1s linear;}
#essai3{ position:absolute; z-index:5;
background:coral; border: 0.6vh double green; width:16vw;height:9vw; transform:translate(42vw,2vw); transition:all 1s linear;}
--></style>

Le premier cadre vert fluo est positionné en transform:translate(2vw,2vw); pour le déplacer, écrivez, dans la case modifier la position1, par exemple:translate(15vw,15vw) et cliquez sur le bouton:"modifier la position1"

Idem pour les autres cadres; ici, 3 cadres mais vous pouvez en ajouter.

Pour les largeurs et hauteurs, vous pouvez écrire, dans les cases, de valeurs du genre: 15vw ou 6vw ou 50px... mais le but étant d'apprendre à maîtriser les unités adaptatives, oubliez les pixels !

Vous pouvez ainsi positionner vos éléments dans un cadre adaptatif et recopiez les valeurs choisies dans votre article.