CSS : conception responsive

Name: CSS : conception responsive
Author: Cliff Brozo

Comment faire en sorte que votre page Web s'affiche correctement sur n'importe quel appareil

Preview the first lesson free — get full access to all 4 lessons.

Cours : à la demande

(musique légère) Bienvenue de nouveau au cours de Knowledge City sur des feuilles de style en cascade. Je suis Cliff Brozo, je suis votre professeur. Et dans la leçon d'aujourd'hui, nous allons parler de Responsive Design, comment les choses vont changer à mesure que la fenêtre change. Nous découvrirons les différentes fenêtres. Nous allons comprendre ce que nous entendons par vue en grille et comment le mettre en œuvre. Nous explorerons les requêtes multimédias et nous examinerons les conteneurs et comment les utiliser. Regardons le Viewport. C'est la zone visible des utilisateurs. En fonction de l'appareil que l'utilisateur regarde, ça pourrait être un téléphone, ça pourrait être une tablette, ça pourrait être un ordinateur de bureau, ça pourrait être un ordinateur portable. Et ce que nous faisons, c'est coder notre HTML pour prêter attention à l'appareil utilisé par l'utilisateur. Et puis nous pouvons styliser notre code pour l'adapter parfaitement à cet appareil. Une vue grille réactive nous permet de rassembler des lignes et des colonnes et divisez la page en morceaux. Et nous pouvons alors identifier chacune de ces pièces et les coiffer différemment. Les requêtes multimédias nous permettent de jeter un œil à cette fenêtre et testez l'appareil de l'utilisateur pour voir lequel il ou elle utilise. Nous arrivons ensuite à définir notre largeur et notre hauteur pour maximiser nos pages sur leur appareil. Échelle d'images réactive, et il y a différentes manières d'avoir l'image à l'échelle pour s'adapter à l'appareil. Nous aimons certainement conserver nos proportions pour que l'image ne se déforme pas, ce qui signifie que nous voulons rarement étirer une image pour s'adapter à une zone de contenu de mauvaise taille. Les images responsives ont trois possibilités. Ils peuvent être contenus dans une certaine zone comme vous pouvez le voir, le London Bridge est parfaitement contenu dans cette boîte carrée. Si nous demandons au navigateur d'adapter le London Bridge à 100% de la taille de l'image, nous perdons une partie de l'image. Le reste ne rentre pas et comme vous pouvez le voir, il se déforme. Et enfin, si on demande au navigateur pour couvrir toute la zone, eh bien, ce n'est pas seulement la boîte simple si vous avez l'air très, de très près dans le coin inférieur droit, il y a le sommet du London Bridge parce que c'est cette partie de l'image juste là. Les requêtes médias nous permettent de mettre différentes images sur différents écrans. Donc, en fonction de l'appareil de l'utilisateur, l'utilisateur verra une image très différente essentiellement les mêmes choses. Les conteneurs nous permettent de créer des boîtes comme Excel puis placez les choses dans ces boîtes. Nous pouvons avoir des lignes et des colonnes normales qui peuvent ou peut ne pas être de la même taille, ou nous pouvons avoir de la fantaisie et créer un groupe différent de lignes et de colonnes avec superpositions et zones qui ne sont pas de la même taille. Voyons donc comment tout cela fonctionne.

Intermédiaire Fournisseur : Cliff Brozo 4 leçons · 22m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Ce cours aborde les techniques de conception réactive avec CSS. Cela garantit que les pages Web s'adapteront à l'écran de tout appareil que vous utilisez : téléphone, tablette ou ordinateur de bureau. Vous apprendrez ce qu'est la fenêtre d'affichage et comment déterminer le périphérique utilisé. Vous examinerez également la grille de visualisation, les requêtes média, les conteneurs et la manière d'utiliser les CSS pour mettre les pages en page.

Ce que vous allez apprendre

Naviguer dans la zone d'affichage (viewport) et déterminer quel appareil est utilisé
Appliquer des requêtes multimédias (media queries) et des conteneurs pour adapter les mises en page aux différents appareils
Mettre en pratique la vue en grille CSS (CSS grid view) pour la mise en page
Utiliser CSS pour mettre en page afin qu'elles s'adaptent aux écrans de téléphones, de tablettes et d'ordinateurs de bureau
Créer des conceptions web réactives avec des frameworks HTML et CSS réactifs

Points clés à retenir

Le design réactif (responsive design) avec CSS garantit que les pages web s'adaptent à l'écran de n'importe quel appareil utilisé, que ce soit un téléphone, une tablette ou un ordinateur de bureau.
Le cours explique ce qu'est la zone d'affichage (viewport) et comment déterminer quel appareil est utilisé.
Il examine la vue en grille (grid view), les requêtes multimédias (media queries) et les conteneurs en tant qu'outils de mise en page.
Le cours aborde l'utilisation de CSS pour concevoir des pages de manière réactive (responsive).

Foire aux questions

Que couvre ce cours ?

Il couvre les techniques de design réactif avec CSS, notamment le viewport (zone d'affichage), la détermination de l'appareil utilisé, la vue en grille (grid view), les requêtes multimédias (media queries), les conteneurs et l'utilisation de CSS pour structurer les pages.

Que vais-je apprendre à faire ?

Vous apprendrez à naviguer dans le viewport, à explorer les requêtes multimédias et les conteneurs, et à mettre en pratique la vue en grille.

Pourquoi le design réactif (responsive design) est-il important ?

Le design réactif garantit que les pages web s'adaptent à l'écran de l'appareil que vous utilisez, qu'il s'agisse d'un téléphone, d'une tablette ou d'un ordinateur de bureau.

Comment le cours est-il structuré ?

Le cours est divisé en quatre leçons : Design réactif Partie 1 à Partie 4 (Responsive Design Part 1 through Part 4).

Quelles compétences ce cours permet-il de développer ?

Il développe des compétences en codes CSS, frameworks CSS, CSS Grid, CSS orienté objet, HTML réactif et conception web réactive (Responsive Web Design).