L'essentiel des CSS

Gérer les proportionnalités d'écran de présentation

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Il existe une unité hybride qui va se baser sur une mesure : les dimensions du viewport. Cette unité va pouvoir être utilisée pour définir des tailles typographiques. Il est cependant important de tenir compte de sa prise en charge.
03:44

Transcription

Il existe maintenant une autre unité de type proportionnelle qui part d'un point de vue, déjà, de mesure mais qui s'adapte pour la taille de la typographie. En fait il s'agit des unités vw, vh, vmin, vmax. Alors vw et vh pour viewport width et viewport height. Il est vrai que si on diffuse sur un téléphone portable, qui sera plus un écran vertical et très étroit ou une phablette et qui aura un écran beaucoup plus large, donc un rapport d'homothétie largueur/hauteur différent, ou sur un écran de bureau qui est en 4/3 ou en 16/9, on va avoir des proportionnalités différentes. Sur un écran de bureau, on pourra écrire plus gros que sur un téléphone portable, etc. Donc on pourra adapter à ces unités-là. Ces unités-là correspondent donc, le viewport width à 1, donc il correspond à 1% de la largeur de l'écran. Et vh correspond à un 1% de la hauteur de l'écran. Le vmin et le vmax vont correspondre à quelle est la hauteur, est-ce que je suis plutôt vertical ou horizontal ? Est-ce que je suis à l'italienne ou en portrait ? Regardez ici, on le voit très mal, puisqu'il faudrait spécifier comment fonctionne le code HTML ici, on a simplement 4 div qui sont respectivement classés et contenus vw, vh et vmin et vmax qu'on retrouve ici. Tous les div font une hauteur de 50 pixels, tous les div font une line height de 50 pixels, donc ils vont tous occuper une bande de 50 pixels. Ce qui va changer simplement, c'est le width, la couleur d'écriture et la couleur de fond qui va être utilisée. Le soucis qu'on on a, c'est que, un, on va pas le voir donc si je passe, simplement pour les w on va le voir ici, si je fais un 10 j'actualise ma page et je suis passé à 10. C'est vrai que je fais 600 et quelques, donc on va dire 650, j'arrive bien ici à 65. Regardez si je viens à 500 ici en largeur, on est bien à la moitié de notre partie. Donc plutôt que de passer sur un rapport de 10, on va passer sur un rapport de 50 ici, ça sera beaucoup plus visible sur tous les bancs, donc on va dire ce sera dans du 50% de cet élément-là. Ctrl+S, si j'actualise... de 500, je passe à 250. Et vous voyez que le plus important c'est la hauteur, vous voyez la hauteur, le vmax, est plus haut que le vmin. Et là, on va pouvoir, comme ça, ouvrir nos éléments pour pouvoir retrouver ses éléments. Donc, le vh va pouvoir être utilisé pour définir la taille de la typo, si on écrit en 5vw, en 5vh ou en 5vmin, en fonction de qui est le plus petit, est-ce que le plus petit c'est la hauteur ou la largeur, ça nous répond là-dessus directement, on va pouvoir écrire, mettons, une typo en 5vmin, ce sera quelque chose de correct, et ça adaptera la typo directement au périphérique de sortie. Donc c'est une unité proportionnelle hybride qui peut faire l'affaire entre le fait de mesurer une distance, une surface, et l'adapter à la font-size. Donc ici, si je tape une font-size par exemple de 5vmin et que j'actualise, voyez toutes les typos vont passer dans ce sens-là. Juste un petit détail, c'est du fait qu'ici je suis passé en écran, voilà je passe directement, je le surcharge, c'est le dernier qui parle qui a raison, rappelez-vous. Ici, je suis en 5vmin. Et vous voyez, dès que je réduis mon écran, automatiquement je réduis la taille de la typo ou j'augmente la taille de la typo jusqu'à un maximum, puisqu'en fait ce qui va changer ensuite ça va être si je joue également sur la hauteur, vous voyez. Donc cette unité, cette proportionnalité entre la mesure et la taille peut avoir son intérêt surtout dans une pluridistribution de contenus entre les différents utilisateurs qui se trouvent sur tablette, sur écran ou sur portable.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !