CSS : Positionnement et mise en page

Gérer des pages réactives

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Apprenez à proposer différents affichages en fonction du périphérique de lecture. Vous verrez ensuite comment implémenter au mieux les points de rupture de chacune de vos présentations.
06:37

Transcription

Revenons sur une notion très importante de l'affichage de nos contenus qui sont les media query qui vont nous permettre de pouvoir distribuer une mise en page et un affichage différents en fonction du périphérique de lecture. Les fameuses media query vont nous permettre de pouvoir détecter tout un certain nombre de propriétés sur l'appareil sur lequel nous consultons le contenu et donc de pouvoir présenter un affichage différent. Alors, il y a quelques points vraiment importants à prendre en considération à ce niveau, et je vous invite à ce qu'on le regarde directement au travers d'un fichier exemple. Alors ce fichier exemple est simplement constitué d'une partie avec 3 div ici qui vont représenter respectivement les pixels, le EM et un repère fixe ici donc les CSS et qui sont là sont des CSS totalement bateaux. Ici ce qu'on a besoin d'avoir juste comme information c'est que le repère ici c'est une image fixe repere-600.png qui fait six cent pixels de large Et puis ici sur la partie du body un arrière-plan qui est une image qui représente un trait vertical tous les cent pixels qui va nous permettre donc de pouvoir voir à quel dimension, une sorte de règle on ouvre ou on ferme notre fenêtre de navigateur. Alors pour gérer les media query ce qui est important on y revient rapidement mais je vous invite à vous rapprocher des fondamentaux sur les CSS pour ce genre d'information là. C'est la balise meta name en utilisant la propriété viewport qui va nous permettre donc de pouvoir dialoguer avec le périphérique de lecture et de lui dire que son contenu déjà le contenu au niveau de sa largeur ce n'est pas la largeur qu'il est capable de pouvoir afficher parce que beaucoup de périphériques vont vous dire : 1 200 ? Même pas peur... je te l'affiche, oui, mais en tout petit. Non, ce que je veux c'est que la largeur considérée sera la largeur physique de ce périphérique donc de ta propre largeur d'écran et donc width = device width pour être sûr de respecter une certaine lisibilité de nos contenus et ne pas afficher du contenu justement minusculisé. Et puis maintenant ici la deuxième propriété c'est le initial scale à EM pour initialiser le zoom éventuel qui aura été fait par l'utilisateur et donc de partir sur une base de 100 %. On a une nouvelle propriété qui est apparue cette fois-ci à l'intérieur des styles donc comme une règle qui est le @viewport qui va nous permettre pour les navigateurs modernes de pouvoir définir exactement la même chose au niveau de la largeur et de l'utilisation de zoom. Alors je vous invite à vous rapprocher ici du W3C de venir voir dans un premier temps les propriétés utilisables mais aussi niveau de l'adaptation de la balise meta tout ce qui est utilisable en balise meta elle-même comme par exemple : est-ce qu'on autorise à l'utilisateur à zoomer ou pas ? Rien avoir avec le zoom par défaut de départ. Et puis de venir voir toute l'implémentation de la add viewport rule qui a été définie ici et qui vous apporte des cas de figure plus particuliers, plus pointus, que vous pourriez avoir besoin d'utiliser pour vos développements. Alors, ceci placé maintenant comment utiliser nos descriptions d'aspect responsive. Alors, si on place par exemple un @media all, c'est-à-dire je vais considérer tout périphérique, on aurait pu spécifier que le screen ou le print ou autre. Donc pour voir qui on va affecter ici il faut retourner dans la partie media. En faisant bien attention que par rapport aux anciennes descriptions. Certains sont devenus des pré-cathode comme tty, TV, projection, handheld etc. Donc ici les 4 propriétés possibles seraient : all, print, screen et speech pour pouvoir cibler ici le type de périphérique qui serait concerné. Alors ici on a utilisé une chose et qui est souvent polémiqué mal utilisée où chacun peut avoir son opinion. C'est quel va être l'unité que je vais utiliser pour déclencher le mode d'affichage. Ici on va utiliser un mode en pixels, ici voyez pour cette partie-là et on va dire dès l'instant où la largeur minimum sera de 600 pixels donc dès qu'on sera sur un grand appareil, ici on va demander que la classe pixels qui correspond ici sur le HTML à cet élément là ait un arrière-plan coloré. Et moi ce que je vous invite à faire c'est maintenant de regarder au niveau d'une autre unité ici qui serait le EM et au niveau du EM je vais prendre 37 5 EM pour avoir ce mode d'affichage coloré. Alors à quoi correspond 37 5 EM ? Bien, par défaut on sait que tous les navigateurs ici utilisent une page par défaut ici et d'affichage qui seront de 16 pixels taille d'affichage de la typographie de base. Donc si je fais ici 600 divisés par 16, on voit bien qu'on obtient ce fameux 37 5 On a un autre élément ici qui est important à prendre en considération qui va être dans le mode d'affichage d'avoir un zoom non pas zoom c'est-a-dire que je grossis l'intégralité des choses mais simplement le texte. Donc on va pouvoir jouer maintenant avec crtl + ou ctrl - sur cette taille de texte. Donc, ici on a placé un premier élément média query qui va nous afficher un arrière-plan coloré à 600 pixels ou à 37,5 EM. Donc si j'enregistre cette page, je viens ici j'actualise mon contenu, vous voyez je suis supérieur à 600 donc automatiquement j'affiche le contenu et bien entendu ce contenu va être affiché tout le long de 600. Et si je descend en dessous de 600, les deux disparaissent. Pourquoi ? Parce que les deux agissent sur cette même dimension. Qu'en est-il si je zoome à l'intérieur ? Donc, voyez ici je viens de grandir mon texte ici et vous voyez que ici la partie plus grande de EM va agir que dès lors où je serai plus grand. Alors que si je reviens à zero alors ici je vais descendre. Alors là je suis plus à 37,5 EM si je reviens à zéro ici, voyez que c'est affiché. Donc on a bien pris en compte le fait que l'utilisateur a zoomé dans le contenu alors que pour 600 pixels, lui il est toujours supérieur à 600 pixels qu'on ait zoomé ou pas son device, il fait 600 pixels. Autre petit élément de discorde, regardez si je suis donc à 600 pixels, les deux sont affichés ici et maintenant, je ne vais pas jouer sur la partie du contrôle plus mais je vais dire que par habitude, moi le 16 pixels ça me va pas. Je veux afficher par défaut un 20 pixels. Qu'est-ce-qu'il en est en 20 pixels ici si j'actualise ma page ici en chargement voyez qu'en 20 pixels, ma page automatiquement me dit attention ta typo, elle est plus grosse d'écriture. Lui n'en tient pas compte, lui en tient compte. Je vais vite revenir quand même sur du 16 pixels ici Et donc préférez plutôt d'utiliser une partie basée en EM ici au niveau du responsive plutôt qu'une partie qui serait basée sur du pixel.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 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 !