Bordure, ombre, police en unités adaptatives

Je sais que si vous avez paramétré votre page blog en largeur 100%, celle-ci s'adaptera à la résolution de l'écran de lecture et comme les sites ou blog en mesures adaptatives sont référencés en priorité par les moteurs de recherche, nous avons intérêt à nous y intéresser.

La largeur de votre page s'affichera à 100% de la largeur de l'écran de lecture, la hauteur restant selon la hauteur relative de votre page.

Les écran PC et sans doute quelques autres sont au rapport 16/9 soit, par exemple: largeur 1600px pour hauteur 900px ... mais ce n'est pas le cas d'autres médias (smartphone, téléphone).

Alors, faut-il changer nos habitudes et utiliser des unités non fixes ? Essayons tout de même de les maîtriser, au cas où !

Les mesures adaptatives, d'après ce que je lis, sont le %, le cadratin (EM) et, ce que j'utilise car je la trouve pratique, les unités Viewport (vw=largeur et vh=hauteur).

Je vous laisse consulter les CSS3 Media queries qui sont une autre écriture mais je ne suis pas assez pointu là-dessus, même si je les ai utilisées.

Revenons donc aux unités viewport, qui peuvent être utilisées en taille image, positionnement, police, bordure, ombre... comme une unité fixe (px, pt..).

width:50vw; largeur de 50% de la largeur de l'écran de lecture.

height:30vh; hauteur de 30% de la hauteur de l'écran de lecture.

margin:1vh auto; positionnement vertical de 1vh de ce qui est dessous et dessus et automatique centré en latéral.

background:linear-gradient(); couleur de fond en dégradé.

border:0.2vw solid white; bordure d'épaisseur 0.2vw; on peut écrire aussi 0.8vh, par exemple.

box-shadow:0.2vw 0.2vw 0.3vw black; épaisseur latérale et verticale:0.2vw, flou: 0.3vw, couleur noire.

font-size:2.5vh; de la même façon, nous pouvons écrire 1vw, qui prendra en référence la largeur et non la hauteur.

text-shadow:0.1vh 0.1vh black; idem avec vw, qui est 16/9 plus importante.

padding:1vw: espace entre texte et bordure.

box-sizing:border-box; évite d'ajouter le padding aux dimensions du cadre.

Comme vous le voyez, ces unités s'utilisent de la même façon que les unités fixes.

Si vous disposez de plusieurs médias différents, vous pouvez modifier le code que j'indique afin de vérifier qu'il s'adapte.