• Mesures adaptives A

    J'ai déjà proposé des pages sur ce sujet mais il semble que le sujet intéresse certain(e)s qui voudraient utiliser des unités adaptatives pour leurs pages de blog.

    Une unité adaptative est une unité qui s'adapte à la résolution de l'écran de lecture (largeur/hauteur).

    Ces écrans sont le plus souvent avec un rapport largeur/hauteur de 16/9 ou 16/10.

    Si vous publiez une image en 1000px par 1000px, un écran de 1440x900px ne l'affichera pas entièrement en hauteur; ne parlons pas des tablettes ou téléphones qui ont de petites résolutions.

    L'intérêt de publier en mesure adaptatives est donc d'afficher correctement votre article, sur tout type d'écran.

    A ma connaissance, en ce qui concerne les dimensions images, 2 unités peuvent faire ça: les unités viewport (vw/vh) et les %; il en existe pour la taille des polices mais les viewport peuvent faire également.

    Pour la petite histoire: vw=viewport width/viewport largeur et vh=viewport hight/viewport hauteur; vw prend en référence (presque identique à %) la largeur de l'écran de lecture et vh, sa hauteur.

    A mon avis, les unités viewport sont les plus simples à utiliser car utilisables en dimensionnement, positionnement et taille police.

    Vos appareils photos prennent des images en différents formats; je vais partir d'images au rapport 16/9 mais sous forme de cadres colorés, pour simplifier.

    Il vous faut ouvrir le code source pour utiliser ce genre d'unités.

    <p style="width: 20vw; height: 23vh; text-align:center; font-size:2vh; border: 0.2vh solid black; background: yellow;">...</p>

    Le ratio 16/10 étant très proche, la différence sera invisible.

    Pour conserver le ratio 16/9 entre les vw et les vh, il faut, par exemple, mettre une largeur de 10vw avec une hauteur de 10x1.15 en vh, soit 11.5vh.
    Ainsi, pour 30vw -->34.5vh/40vw -->46vh/50vw -->57.5vh etc...


    La visiteuse à l'origine de la publication de cette page veut publier un montage carré, de 1000px par 1000px, en unités adaptatives.

    Plutôt que d'utiliser 2 unités différentes (vw et vh), il est plus simple d'utiliser une des deux :

    <p style="width: 20vw; height: 20vw; text-align:center; font-size:2vh; border: 0.2vh solid black; background: yellow;">...</p>

    L'unité pourra être vh, de la même manière; l'unité vh se référant à la hauteur de votre écran, elle est plus petite en équivalent pixel que vw.


    Pour déterminer les valeurs compatibles avec la largeur de votre zone article blog, je vous conseille de faire des essais; cela prendra quelques minutes et vous conserverez ces valeurs pour vos autres articles à venir.

    Vous pouvez recopier le code d'un de mes exemples, en code source d'un article d'essai; vous modifiez les valeurs jusqu'à obtenir la taille que vous souhaitez, sur votre blog et sur votre écran; ainsi, vos visiteurs, verront votre montage adapté à leur écran, sans avoir à jouer de "l'ascenseur" ou du zoom !

    Pour positionner ce cadre dans votre page, vous pouvez utiliser les mêmes unités et, comme vous le voyez dans mes codes exemple, il en est de même pour la taille de la police.

    <p style="float: left; width: 20vw; height: 20vw; margin: 0 0 20vh 0; text-align: center; font-size: 2vh; border: 0.2vh solid black; background: yellow; transform: translate(10vw,10vh) rotate(5deg);">...</p>

    Dans ce positionnement de mon article, j'ai laissé un espace sous le cadre jaune, pour que la barre de séparation soit bien détachée (margin:0 0 20vh 0;).
    La rotation du cadre faussant le calcul du programme;
    Cette marge et le positionnement (transform:translate();) sont en unités adaptatives.
    Si le fait d'utiliser 2 unités différentes (vw/vh), vous pouvez n'en utiliser qu'une en jouant sur la valeur (accepte les fractions: 0.35vw)


    Pour vos images, qui ont un ratio déterminé (16/9 ou 4/3, le plus souvent), vous pouvez ne préciser que la largeur en vw et la hauteur sera proportionnelle automatiquement.

    <p style="text-align:center;"><img style="width:20vw;" src="http://ekladata.com/7kyhE6N44iMvz1vcs0SjmK88rEQ.jpg"></p>