• Adaptatif sur bordure et police

    Depuis quelques temps, je propose des montages qui s'adaptent à la taille de l'écran du visiteur, ce que les navigateurs font depuis longtemps mais il n'est jamais trop tard pour bien faire !

    Un élément d'une taille fixe ne sera pas affiché de la même façon sur un écran de 1920x1080px que sur un écran de 1366x768px; par contre, une image semble être reprise par le navigateur pour s'adapter à l'écran, sa taille étant connue.

    Un paragraphe, utilisant la largeur de l'écran, sera aussi adapté automatiquement.

    Par contre, si vous définissez une taille d'écriture ou une largeur de bordure sur une image, elle sera définie en pt ou en px, donc des valeurs fixes; je viens de trouver un site (ancien !) + lien qui ajoute une unité adaptative pour au moins ces deux éléments: ICI et ICI.

    Essayons tout ça sur des exemples, ce qui va vous demander de lire cet article avec plusieurs médias de format écran différent.

    Les ronds de ce montage ont un bordure noire, continue et, soit en vw (Viewport Width), soit en px (pixels), vous voyez la différence entre les 2 largeurs d'écran, en pixels, alors qu'en vw, l'affichage est le même.

    Ecran 1920px.
    border:8vw solid black;

     

    Ecran 1366px.
    border:8vw solid black;


    Ecran 1920px.
    border:150px solid black;

     

    Ecran 1366px.
    border:150px solid black;


    Essayons avec un texte sur écran en 1920px de large:

    Texte en font-size:40pt;

    Texte en font-size:3vw;

    Essayons avec un texte sur écran en 1366px de large:

    L'écran étant plus étroit, la police en vw diminue pour conserver le même rapport taille texte/largeur écran.