Texte en adaptatif

Nous voyons l'intérêt, pour le confort de nos visiteurs, de revoir la construction de nos codes.
Par contre, ce qui est simple pour des images, le devient moins dès lors que l'on publie des cadres avec du texte.
Il nous faut les dimensionner en adaptatif, les positionner en adaptatif, avec bordure et taille police en unités non fixes... et là, il faut nous aussi nous adapter !
Si nous voulons publier un montage par code CSS, nous aurons différents éléments à paramétrer ainsi; on essaye ?

Paragraphe 1, dimensionné en CSS.
Ce paragraphe, dont je vais regarder la bouille, sur un écran plus petit, me permet de signaler un aspect qui m'a fait chercher:
Un de mes montages onglets ne s'affichait pas bien en publication pour la simple raison que, sur ma page de blog, avec une animation en article de rubrique, j'utilisais les mêmes identifiants pour les onglets que pour mon animation !
Résultat, mes onglets se baladaient dans l'article, en suivant l'animation à leur identifiant !

Autre point: pour une image ou un élément à dimensions fixes, le fait de paramétrer la largeur fait que le programme calcule la hauteur correspondante pour conserver le ratio.
Vous pouvez vouloir modifier de rapport largeur/hauteur (ratio) en précisant la largeur et la hauteur de que vous souhaitez.
Pour un cadre texte, vous pouvez définir la largeur et laisser le programme calculer la hauteur en fonction du contenu, en écrivant, par exemple:
<p style="width:20vw; height:auto:">...</p>

Dans les cadres précédents, le texte s'approche au plus près de la bordure.
Vous connaissez le moyen de l'éloigner par l'attribut: padding:h d b g; ou avec une seule valeur si l'écart est le même pour les 4 côtés: padding:5vh;
Là aussi, il va falloir utiliser des unités adaptatives, par exemple vw/vh.
Ces unités viewport sont en gros, des % de la largeur de l'écran de lecture (vw=viewport wide) et de la hauteur (vh=viewport height).
Un inconvénient, pour les positionnements et que les dimensions de votre cadre vont être augmentées de ces valeurs de padding, de même que la largeur de la bordure s'ajoute aux dimensions que vous avez définies.
Image carrée: width:20vw; height:20vw; ou idem avec vh.

Pour que les dimensions de votre élément reste celles que vous avez définies, ce qui est plus pratique pour les positionnements, un attribut le permet:
box-sizing:border-box;
Dans ce cas, les dimensions que vous avez définies sont celles "hors tout" de l'élément, c'est à dire comprennent la bordure et l'écart texte/bordure.

Pour ajouter une ombre; sur un cadre, là aussi, les unités devront être en adaptatives.
box-shadow:Avw Bvh Cvw ou vh couleur;
N'oublions pas que vw est un % de la largeur de l'écran de lecture et donc plus grande que vh, qui est un % de sa hauteur;
Ainsi, si l'ombre en 0.5vw est trop importante, vous pouvez écrire 0.5vh.
Le contenu de ces cadres a été écrit en code source ou sur bloc-notre et recopié.
Il me reste à regarder sur un petit écran le résultat ... ta ta ta tsoin !