Requêtes de largeur, de hauteur et d’orientation
Ciblez des dimensions précises de la zone d’affichage et des orientations d’appareil avec les fonctionnalités média.
Requêtes de largeur, de hauteur et d’orientation est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Fonctionnalité média width
La fonctionnalité width cible la largeur de la zone d’affichage. Utilisez min-width et max-width pour définir des plages.
<div class="box">width feature demo</div>
Fonctionnalité média height
La fonctionnalité height cible la hauteur de la zone d’affichage. Elle est utile pour les zones d’affichage peu hautes, comme celles des téléphones en mode paysage, où l’espace vertical est limité.
<div class="hero">Hero (grows on tall viewports)</div>
Modèle pour les zones d’affichage peu hautes
Détectez les zones d’affichage peu hautes et réduisez les marges intérieures ou les hauteurs qui provoqueraient un débordement du contenu :
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation : portrait et paysage
La fonctionnalité orientation détecte si la zone d’affichage est plus haute (portrait) ou plus large (landscape) que dans l’autre direction.
<div class="hero">Orientation-aware hero</div>
Ratio de pixels de l’appareil
Ciblez les écrans à haute densité de pixels (Retina) avec la fonctionnalité resolution ou avec la fonctionnalité non standard, mais largement prise en charge, -webkit-device-pixel-ratio.
<div class="logo"></div>
Fonctionnalité aspect-ratio
Ciblez des rapports largeur/hauteur précis de la zone d’affichage. Cela est utile pour centrer différemment le contenu dans des zones d’affichage au format 4:3 ou 16:9.
<div class="video"></div>
Capacité hover
La fonctionnalité hover: hover détecte si le mode de saisie principal utilise un pointeur précis capable de survoler. Elle est utile pour les styles propres aux appareils tactiles.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
Fonctionnalité pointer
pointer: fine correspond à un curseur de souris précis ; pointer: coarse à un doigt ou un stylet. Cela est utile pour adapter la taille des zones d’activation.
<button>Tap target</button>
Combinaison de width et height
Créez des règles propres aux téléphones en mode paysage en combinant min-width avec max-height :
<div class="nav">Nav bar</div>
Zone d’affichage et dimensions de l’appareil
Les requêtes média CSS ciblent la zone d’affichage (la fenêtre du navigateur), et non les dimensions physiques de l’écran de l’appareil. Redimensionner la fenêtre d’un navigateur sur ordinateur modifie la largeur de la zone d’affichage en temps réel.
Unités de zone d’affichage et requêtes média
Les requêtes média et les unités de zone d’affichage (vw, vh) réagissent aux mêmes dimensions de zone d’affichage. Utilisez les requêtes média pour modifier la mise en page et les unités de zone d’affichage pour un dimensionnement fluide au sein d’une mise en page.
Vérification rapide
Quelle fonctionnalité média détecte si un appareil possède un pointeur précis capable de survoler des éléments ?
Récapitulatif
Les fonctionnalités média comprennent width, height, orientation, resolution, hover et pointer. Utilisez-les pour adapter les mises en page aux dimensions de la zone d’affichage et aux capacités de l’appareil. Les fonctionnalités hover et pointer permettent de cibler les appareils tactiles ou équipés d’une souris au-delà de la seule taille de l’écran.
Questions Fréquemment Posées
La leçon « Requêtes de largeur, de hauteur et d’orientation » est-elle gratuite ?
Oui — le texte complet de « Requêtes de largeur, de hauteur et d’orientation » 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 CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Requêtes de largeur, de hauteur et d’orientation » ?
Ciblez des dimensions précises de la zone d’affichage et des orientations d’appareil avec les fonctionnalités média. Tu pratiques CSS 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 CSS Academy ?
Aucune expérience préalable n'est requise. CSS 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 2 sur 4.
Combien de temps prend la leçon « Requêtes de largeur, de hauteur et d’orientation » ?
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 CSS Academy ?
Oui. Chaque leçon CSS 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
- Syntaxe et points d’arrêt courants
- Requêtes de largeur, de hauteur et d’orientation
- Prefers-Color-Scheme et Prefers-Reduced-Motion
- Combinaison de plusieurs requêtes média