Introduction video
Principes généraux
Réaliser une maquette en responsive Design
Maitriser l'intégration en Responsive Design
Le travail des textes
Intégrer des images optimisées
Une réalisation complète
Connaissances complémentaires
Conclusion
Détails de la leçon
Description de la leçon
Les media queries sont une composante clé de la conception en Responsive Web Design, permettant d'adapter les feuilles de style en fonction des caractéristiques des différents dispositifs. Ce cours commence par un rappel sur les différentes méthodes d'intégration des feuilles de style CSS, leur histoire et l'évolution vers CSS3.
Historiquement, deux méthodes étaient utilisées : l'insertion directe dans le HTML à l'aide de la balise style, et la liaison d'un document CSS externe via la balise link, où l'on peut ajouter un attribut media pour spécifier le type de média. Aujourd'hui, avec CSS3, les media queries permettent d'affiner encore plus ces règles en utilisant des expressions conditionnelles telles que only et not avec une gamme variée de types de médias et d'expressions comme min-width et max-height.
Des exemples pratiques illustrent ces concepts, montrant comment écrire et appliquer correctement ces règles, en optimisant l’apparence de vos pages pour différents écrans et dispositifs, des smartphones aux imprimantes.
Objectifs de cette leçon
L'objectif principal de cette vidéo est de vous familiariser avec l'utilisation des media queries en CSS3, de comprendre leur syntaxe et d'apprendre à les appliquer efficacement pour adapter vos sites web aux différents types d'écrans et dispositifs.
Prérequis pour cette leçon
Avoir une bonne compréhension de base du HTML et du CSS est nécessaire pour profiter pleinement de cette vidéo.
Métiers concernés
Les connaissances acquises sur les media queries sont applicables dans des métiers tels que développeur web, designer UX/UI et intégrateur web.
Alternatives et ressources
En termes de solutions alternatives, vous pouvez explorer des frameworks comme Bootstrap ou Foundation qui intègrent des pratiques de responsive design incluant les media queries automatiquement.
Questions & Réponses
Je m'abonne