Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Découvrir le design responsive

Créer des points de rupture avec les media queries

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Voyez comment tirer parti des media queries pour créer des points de rupture. Ainsi, vous pourrez adapter la mise en page à la largeur de l'écran grâce à des styles spécifiques.

Transcription

Là où les media queries vont devenir réellement intéressantes, c'est qu'elles vont nous permettre de créer des points de rupture. Alors qu'est-ce qu'un point de rupture ? Un point de rupture c'est en fait le moment où la mise en page va changer de disposition, en fonction de la largeur de l'écran. Il ne s'agit pas ici de s'adapter à tel ou tel périphérique, mais de s'adapter à la largeur d'un écran. Et vous allez voir que c'est quelque chose qui va nous permettre de pouvoir travailler pour les principaux périphériques. Supposons par exemple que nous ciblions trois types de périphériques principaux, smartphone, tablette, et ordinateur. Nous allons pouvoir écrire une media query pour les tablettes. Ici nous allons spécifier que nous voulons travailler pour des écrans dont la largeur est inférieure à 480 pixels. Nous allons ensuite nous baser sur une largeur d'écran supérieure, attention il ne faut pas qu'il y ait de recouvrement, donc nous ne pourrions pas indiquer comme largeur minimale 480, il nous faut indiquer 481. Et puis nous allons aller jusqu'à une largeur de 768 pixels. Et nous définirons ici nos styles pour tablette. Et puis ensuite, nous allons dire que pour toutes les tailles supérieures à 769 pixels, eh bien nous allons appliquer des styles pour ordinateur. Nous avons donc la possibilité en fonction de 3 media queries d'appliquer des styles qui vont être différents pour chacun des périphériques. Sachant que nous ne visons pas des périphériques, mais la taille de la fenêtre dans laquelle va s'afficher le site Web. Alors nous pouvons par exemple ici travailler avec une feuille de style qui va définir p {, c'est-à-dire le paragraphe, en définissant la largeur en pourcentage par rapport à son conteneur, sa hauteur peut être définie en pixels, on peut définir une marge intérieure, la couleur du texte et la couleur du fond. On peut faire de la même manière pour les tablettes, et procéder également de la même manière pour l'ordinateur de bureau. Vous remarquerez que nous avons travaillé avec la largeur maximale, et vous remarquerez également que nous avons travaillé avec l'opérateur only, de manière à ce que les anciens agents utilisateurs, c'est-à-dire les vieux navigateurs, ne prennent pas en compte ces feuilles de style, mais se basent sur des feuilles de style qui seraient les feuilles de styles alternatives. Il faut donc prévoir des styles par défaut pour les anciens agents utilisateurs. Et puis nous avons procédé de la même façon pour les tablettes. Et nous avons ici précisé une plage entre 480 pixels et 768 pixels. En ce qui concerne l'ordinateur de bureau, nous nous sommes contentés de spécifier des valeurs supérieures en largeur à 769 pixels. Notez que pour chacun de ces styles, nous avons changé le fond de couleur. Et nous allons donc voir maintenant quel est l'effet, c'est-à-dire comment cela fonctionne, comment le style va changer en fonction de la taille de l'écran. J'ai ici la page sur laquelle j'ai appliqué mes media queries, et vous voyez que la couleur du pavé va varier en fonction de la taille de l'écran. Le texte restera blanc, mais on aura un fond dans les bleus pour les ordinateurs de bureau qui sont supérieurs à 768 pixels. Pour les tablettes entre 481 et 768 pixels, nous aurons une couleur verte, et puis pour les smartphones dont les écrans vont être égaux ou inférieurs à 480 pixels, eh bien nous aurons un affichage en rouge. Voyons tout simplement ici, en resserrant la taille de l'écran, ce qui se passe. Vous remarquez que je suis toujours dans la plage supérieure à 768 pixels, mais dès que je vais arriver à 768 pixels, eh bien l'affichage va se faire en vert. Et si je continue à resserrer ma taille d'écran, vous voyez que le style qui va s'appliquer désormais en dessous de 481 pixels, c'est-à-dire lorsque la largeur sera égale ou inférieure à 480 pixels, eh bien le style appliquera un fond rouge au paragraphe. Vous voyez donc qu'avec le principe des media queries, on va pouvoir mettre en place des points de rupture, c'est-à-dire des points d'arrêt où on va déterminer à partir de quel moment la mise en forme va changer. Ici, très simplement nous avons appliqué une couleur de fond, mais nous allons pouvoir appliquer des styles beaucoup plus sophistiqués, y compris des styles qui vont modifier l'emplacement des différents éléments, ou l'affichage ou non de tel ou tel élément dans notre mise en page. Pour terminer sur cette question des points de rupture, vous avez probablement noté que nous avons travaillé ici non pas avec le device width, c'est-à-dire la largeur de l'écran, mais avec le width, c'est-à-dire la largeur de la fenêtre dans laquelle était affichée notre page Web. Il est effectivement beaucoup plus pratique de travailler avec la largeur de la fenêtre, car on est dans un système qui va être plus souple et plus précis. Et puis il faut également noter que de plus en plus de concepteurs ne travaillent pas sur des largeurs qui sont définies en pixels, mais sur des largeurs qui sont définies en em. Le em est une unité de mesure qui est basée sur la taille de la police qui va être utilisée. Ici, par exemple, sur une largeur de 480 pixels, si nous utilisons une police de 16 pixels, eh bien nous aurons une largeur qui sera une largeur de 30 em. Si nous modifions la hauteur de la police, eh bien nous allons avoir des modifications qui vont s'effectuer, puisque la valeur du em va changer. L'intérêt de travailler avec une notation en em, est que cela bien entendu va nous obliger à faire un petit peu de mathématiques, mais nous allons avoir un design réactif, responsive, qui va répondre non seulement à la largeur de l'écran, mais également au niveau de zoom des utilisateurs. En créant des points de rupture, des points d'arrêt avec des requêtes multimédias, vous allez faire un pas important dans le design responsive. Ce n'est bien entendu que la première étape pour créer des mises en page réactives, il va falloir combiner ces points d'arrêt avec des mises en page fluides, et également des grilles, ce que nous allons voir dans les vidéos suivantes. Dans un fichier html simple, nous avons donc reporté les éléments que nous venons de voir. Nous avons choisi d'utiliser @media, et nous avons précisé pour les éléments qui se trouvent avoir une dimension inférieure à 480 pixels, certaines valeurs pour le paragraphe. Nous avons ensuite spécifié pour les écrans, qui sont en fait des écrans de tablettes ou à l'horizontal entre 480 et 768 pixels, d'autres valeurs pour le paragraphe, la typo restera toujours blanche, white, white, et nous avons enfin ajouté les inscriptions pour les écrans dont la largeur est supérieure à 768 pixels. Et puis nous avons terminé nos instructions de style, qui se trouvent bien entendu dans l'en-tête. Et puis nous avons ensuite tout simplement appliqué la balise paragraphe. Et la balise paragraphe en fonction de ce qui sera trouvé au niveau de la largeur de l'écran, eh bien appliquera des valeurs qui sont différentes. Voyons donc visuellement le résultat de notre travail.

Découvrir le design responsive

Abordez les principes du design responsive. Comprenez la problématique des écrans haute densité, analysez les grilles fluides, explorez les outils de prototypage, etc.

Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :6 sept. 2017

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 !