Requêtes média et développement mobile d’abord
Écrivez des points d’arrêt avec des requêtes média min-width, créez d’abord la mise en page mobile, puis améliorez-la progressivement pour les écrans plus grands.
Requêtes média et développement mobile d’abord est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les requêtes de média ?
Les requêtes de média appliquent des règles CSS uniquement lorsque certaines conditions sont vraies, par exemple lorsque la largeur de la zone d'affichage dépasse un seuil. Elles sont à la base de la conception adaptative et permettent à une seule feuille de style de s'adapter à toutes les tailles d'écran.
Syntaxe de base
Une requête de média encapsule un bloc de CSS dans une règle @media. Les règles qu'elle contient ne s'appliquent que lorsque la condition correspond.
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width et max-width
min-width : applique les styles lorsque la zone d'affichage fait au moins cette largeur (approche mobile d'abord). max-width : applique les styles lorsque la zone d'affichage fait au plus cette largeur (approche ordinateur d'abord). Préférez min-width pour un développement mobile d'abord.
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }Approche mobile d'abord
Écrivez d'abord le CSS pour les petits écrans (en dehors de toute requête de média). Utilisez ensuite des requêtes de média min-width pour ajouter progressivement de la complexité aux écrans plus grands. Le CSS est ainsi plus léger pour les utilisateurs mobiles et le code global plus propre.
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}Points de rupture courants
Choisissez les points de rupture en fonction de votre contenu, et non d'appareils précis. Points de départ courants : 480 px (grands téléphones), 768 px (tablettes), 1024 px (petits ordinateurs) et 1280 px (grands ordinateurs). Évitez les points de rupture ciblant des modèles d'appareils précis.
Types de médias
Au-delà de la largeur de l’écran, vous pouvez cibler des types de médias : screen pour les écrans et print pour les imprimantes. Les requêtes de média d’impression vous permettent de personnaliser l’apparence d’une page à l’impression (masquer la navigation, ajuster les couleurs).
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}Combiner des conditions avec and
Enchaînez les conditions avec and : appliquez les styles uniquement lorsqu’elles sont toutes les deux vraies. Utilisez not et or pour une logique plus complexe.
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}prefers-color-scheme
Respectez la préférence du mode sombre du système de l’utilisateur. Fournissez par défaut un thème sombre sans bouton de basculement.
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
Respectez les utilisateurs qui préfèrent moins d’animations (troubles vestibulaires, épilepsie). Désactivez ou simplifiez les animations dans cette requête de média.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Les requêtes de conteneur — l’avenir
Les requêtes de conteneur (@container) appliquent des styles selon la taille d’un conteneur parent plutôt que celle de la fenêtre d’affichage. Elles permettent une véritable adaptation à l’échelle des composants et sont disponibles dans tous les navigateurs modernes depuis 2023.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}Propriétés logiques pour la prise en charge du RTL
Utilisez des propriétés logiques comme margin-inline-start plutôt que margin-left pour créer des mises en page fonctionnant avec les langues de gauche à droite comme de droite à gauche. Rendez vos mises en page adaptatives pérennes.
Vérification rapide
Quelle approche définit correctement la stratégie CSS mobile-first ?
Récapitulatif : requêtes de média et approche mobile-first
@media (min-width: N) pour une amélioration progressive selon l’approche mobile-first. Écrivez les styles de base pour mobile sans requêtes. Ajoutez de la complexité pour les écrans plus grands. Utilisez prefers-color-scheme pour le mode sombre, prefers-reduced-motion pour l’accessibilité et les requêtes de conteneur pour l’adaptation à l’échelle des composants.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Requêtes média et développement mobile d’abord » est-elle gratuite ?
Oui — le texte complet de « Requêtes média et développement mobile d’abord » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Requêtes média et développement mobile d’abord » ?
Écrivez des points d’arrêt avec des requêtes média min-width, créez d’abord la mise en page mobile, puis améliorez-la progressivement pour les écrans plus grands. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Requêtes média et développement mobile d’abord » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- La balise meta viewport
- Flexbox pour la mise en page
- CSS Grid pour la mise en page
- Requêtes média et développement mobile d’abord