• Unités adaptatives

    Lorsque vous publiez une image, au format, par exemple de 800px par 600px, le visiteur qui va l'ouvrir avec un écran de 1920x1080px de résolution, va la trouver bien petite (40% de la largeur) alors qu'un autre, avec un écran de 1024x768px la verra pratiquement remplir son écran.

    Pour la taille de la police, le problème est le même car la taille est fixe, quel que soit l'écran de lecture.

    Les mesures habituelles pour les dimensions de blocs (image, texte..) sont px/ % et em/pt pour les polices. lien.

    Le pixel (px) est une valeur fixe qui ne tient pas compte de ce qui le lit.

    Le % est un % de l"élément contenant, qui peut être l'écran, pour un bloc (parent) ou le bloc lui-même, pour les éléments  contenus (enfants). D'après mes bricolages, le % n'est pas accepté en police/hauteur et positionnement par transform:translate(h,v); mais accepté en margin:h d b g; je vous laisse vérifier.

    Des nouvelles unités sont apparues: les unités viewport: vw (wide) et vh(height), largeur et hauteur qui correspondent peu ou prou au % de l'écran de lecture, acceptées dans les attributs taille, police, bordure, positionnements, margin permettant un réglage "auto".

    Ce qui signifie que si vous voulez que votre montage s'adapte à l'écran de lecture, il vous faudra utiliser vw/vh ou %.

    largeur de 25vw pour hauteur de 10vh, pour ce cadre.

    <div style="width: 50vw; height: 40vh; transform: translate(25vw,2vh); border: 0.3vw double black; background: yellow; text-align: center;">
    <p style="width: 25vw; height: 10vh; margin: 2vh auto; border: 0.1vw solid black; background: lime; line-height: 10vh; text-align: center;">largeur de 25vw pour hauteur de 10vh, pour ce cadre.</p>
    </div>

    J'ai écrit cet article en mettant en tête, la taille de la police pour tout l'article: font-size:2vh;
    Dans l'exemple ci-dessus, vous remarquerez les positionnements par margin du bloc contenant, qui prend en référence les bords haut et gauche de l'écran et du bloc contenu, qui prend en référence les bords haut et gauche du bloc qui le contient.
    Vous remarquerez également le centrage vertical du texte, dans le bloc vert, par line-height:10vh.