FAT78 - Artisan numérique :-)
 

> Lab > "object" et "vw - vh"

dimanche 10 mars 2019

"object" et "vw - vh"

En html5, la balise "object" permet d’insérer agréablement une page html, tout en permettant d’utiliser les attributs de style css3. Exemple ci-contre, l’insertion de la feuille de musique html (générée par Harmony Assistant) à l’aide du code :

<object style="display:block; float:left; 36vmax; height:48vmax; margin:1vmax;" data="...html" type="text/html">
</object>

Avec ce codage html, la fenêtre "object" se redimensionne suivant les dimensions de la fenêtre du navigateur ... magique !

Mais aussi des documents pdf peuvent être affichés grâce à cette balise, en déclarant data="...pdf" et type="application/pdf" ... doublement magique !!!

Mais pourquoi ?

La norme CSS3, qui définit les styles utilisables dans HTML5, introduit des nouvelles valeurs pour le dimensionnement des objets par rapport à la taille actuelle de la fenêtre : VW, VH, et vmin. Elles permettent entre autres d’avoir une taille de police et des colonnes variables selon la résolution de l’écran. Lors de la réduction du corps de la fenêtre votre titre se réduira suivant le schéma initialement prévu.

L’unité de vh signifie "hauteur de la fenêtre", vw pour viewport width, et vmin représente celui des vh ou vw est la plus courte longueur.

Les valeurs utilisées peuvent être quelque peu déroutantes si vous n’avez pas utilisé ces unités avant. 1VH représente 1% de la fenêtre courante (la zone de contenu de la fenêtre du navigateur) de hauteur, au lieu de 100% comme vous pouvez vous y attendre.

Donc si vous voulez un élément à la hauteur de votre fenêtre, vous devrez le mettre à 100vh. Bien sûr VW fonctionne exactement de la même manière que les unités de VH.

En résumé :

1vw = 1% de la largeur de la fenêtre

1VH = 1% de la hauteur de la fenêtre

1vmin = 1vw ou 1VH, soit la valeur la plus petite

1vmax = 1vw ou 1VH, soit la valeur la plus grande

Les unités de fenêtres sont dynamiques plutôt que statiques, donc si vous redimensionnez la fenêtre du navigateur, la valeur calculée des unités changera également.

Si par exemple la fenêtre de votre navigateur est 1000px de large et l’élément d’une largeur de 10vw, son affichage sera de 100px de large.


SPIP | | Plan du site | Suivre la vie du site RSS 2.0