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; width:42vh; height:60vh; margin:2vh;" data="...html" type="text/html">
</object>

Avec ce codage html, la fenêtre "object" se redimensionne suivant la hauteur de la fenêtre du navigateur ... 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 sera 100px de large.


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