L
e responsive design est aujourd’hui un pilier fondamental de la conception web moderne.
Dans un contexte où les utilisateurs naviguent depuis une grande diversité d’appareils, il est indispensable de proposer des interfaces capables de s’adapter naturellement aux différentes tailles d’écran et aux usages réels.
Cette maîtrise est régulièrement attendue dans les formations en développement web, les examens techniques et les concours liés au numérique.
Les QCM proposés s’inscrivent dans cette logique pédagogique.
Ils abordent des notions clés comme l’adaptation des mises en page, la gestion intelligente des images, l’utilisation d’unités relatives et le recours aux règles conditionnelles.
Ces concepts permettent de concevoir des sites lisibles, performants et agréables à utiliser, quel que soit le support.
L’objectif n’est pas seulement de connaître des propriétés CSS, mais de comprendre les mécanismes qui rendent une interface réellement flexible.
Le lecteur est ainsi guidé pas à pas vers une vision professionnelle et structurée du responsive design.
Le responsive design est aujourd’hui un pilier fondamental de la conception web moderne.
Dans un contexte où les utilisateurs naviguent depuis une grande diversité d’appareils, il est indispensable de proposer des interfaces capables de s’adapter naturellement aux différentes tailles d’écran et aux usages réels.
Cette maîtrise est régulièrement attendue dans les formations en développement web, les examens techniques et les concours liés au numérique.
Les QCM proposés s’inscrivent dans cette logique pédagogique.
Ils abordent des notions clés comme l’adaptation des mises en page, la gestion intelligente des images, l’utilisation d’unités relatives et le recours aux règles conditionnelles.
Ces concepts permettent de concevoir des sites lisibles, performants et agréables à utiliser, quel que soit le support.
L’objectif n’est pas seulement de connaître des propriétés CSS, mais de comprendre les mécanismes qui rendent une interface réellement flexible.
Le lecteur est ainsi guidé pas à pas vers une vision professionnelle et structurée du responsive design.
QCM
1
Corrigé
Quelle fonction CSS permet de définir une taille de police fluide qui oscille entre un minimum et un maximum selon la largeur de l'écran ?
A. calc()
B. clamp()
C. minmax()
D. limit()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
clamp(min, val, max) est l'outil idéal pour la typographie responsive sans media queries.
QCM
2
Corrigé
Quelle unité est égale à 1% de la hauteur de la fenêtre d'affichage (viewport) ?
A. vw
B. vh
C. vmin
D. vmax
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
vh correspond à 'viewport height'.
QCM
3
Corrigé
Quel attribut de la balise <img> permet de proposer différentes résolutions d'une même image selon la densité de pixels de l'écran ?
A. alt
B. srcset
C. sizes
D. media
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
srcset permet au navigateur de choisir le fichier le plus adapté (ex: image@2x.jpg pour écrans Retina).
QCM
4
Corrigé
Que fait la media query '@media (orientation: landscape)' ?
A. Elle cible les écrans dont la largeur est supérieure à la hauteur
B. Elle cible uniquement les imprimantes
C. Elle cible les smartphones tenus verticalement
D. Elle change la couleur de fond
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Landscape correspond au mode paysage (largeur > hauteur).
QCM
5
Corrigé
Quelle balise HTML est utilisée pour l'art direction (proposer des formats d'images totalement différents selon le support) ?
A. <figure>
B. <picture>
C. <source>
D. <img-set>
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
<picture> permet de changer d'image (ex: format carré sur mobile, panoramique sur desktop).
QCM
6
Corrigé
En Responsive Design, quelle est la fonction principale de la balise <meta name='viewport' ...> ?
A. Améliorer le SEO
B. Empêcher le zoom sur mobile
C. Adapter la surface d'affichage du site à la largeur de l'appareil
D. Définir la langue du site
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Sans elle, les navigateurs mobiles simulent une largeur desktop (souvent 980px), rendant le site minuscule.
QCM
7
Corrigé
Quelle unité relative est basée sur la taille de la police de l'élément racine (<html>) ?
A. em
B. rem
C. px
D. %
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
rem signifie 'root em', ce qui assure une cohérence globale accessible.
QCM
8
Corrigé
Quelle valeur de 'object-fit' permet de remplir un conteneur avec une image sans la déformer, quitte à en couper les bords ?
A. fill
B. contain
C. cover
D. none
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Cover est la norme pour les bannières responsives.
QCM
9
Corrigé
Que se passe-t-il si vous utilisez 'width: 100vw' au lieu de 'width: 100%' sur un élément ?
A. Rien, c'est identique
B. 100vw inclut la largeur de la barre de défilement, ce qui peut créer un scroll horizontal
C. 100vw est plus lent à charger
D. 100% est réservé aux mobiles
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le viewport inclut la barre de scroll, contrairement au conteneur parent (%).
QCM
10
Corrigé
Quelle propriété CSS permet d'empêcher un élément de dépasser une certaine largeur tout en restant fluide ?
A. min-width
B. max-width
C. fixed-width
D. overflow
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
max-width: 100% est la base des images responsives.
QCM
11
Corrigé
Quelle fonction permet de choisir la valeur la plus petite entre plusieurs options CSS ?
A. min()
B. max()
C. calc()
D. small()
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
min(50%, 400px) prendra 50% sur mobile et plafonnera à 400px sur grand écran.
QCM
12
Corrigé
Quelle unité est la plus adaptée pour définir les marges internes (padding) d'un bouton pour qu'il s'adapte à la taille de son texte ?
A. px
B. em
C. vh
D. vw
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'unité em est relative à la taille de police de l'élément lui-même.
QCM
13
Corrigé
Comment appelle-t-on l'approche qui consiste à coder d'abord pour les petits écrans avant d'ajouter des règles pour desktop ?
A. Desktop First
B. Mobile First
C. Fluid Design
D. Adaptive Web
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Mobile First utilise généralement des media queries 'min-width'.
QCM
14
Corrigé
Dans une règle '@media (min-width: 768px)', à qui s'applique le style ?
A. Aux écrans de moins de 768px
B. Aux écrans de 768px et plus
C. Uniquement aux tablettes de 768px exactement
D. Aux imprimantes
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
min-width signifie 'au minimum cette largeur'.
QCM
15
Corrigé
Quelle propriété CSS Grid permet de créer automatiquement autant de colonnes que possible sans media queries ?
A. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
B. grid-template-columns: 1fr 1fr 1fr;
C. grid-auto-flow: column;
D. grid-columns: responsive;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
C'est la technique dite 'Holy Grail' du Grid sans media queries.
QCM
16
Corrigé
Que signifie l'unité 'vmin' ?
A. 1% de la dimension la plus petite entre la largeur et la hauteur du viewport
B. Le minimum de pixels autorisés
C. La vitesse minimale d'affichage
D. Une unité pour le texte uniquement
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Utile pour s'assurer qu'un élément tient toujours dans l'écran, peu importe l'orientation.
QCM
17
Corrigé
Quel sélecteur permet de cibler les appareils avec un écran haute densité (Retina) ?
A. @media (min-resolution: 2dppx)
B. @media (high-density)
C. @media (pixel-ratio: high)
D. @media (screen-type: retina)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
min-resolution vérifie la densité de pixels par pouce.
QCM
18
Corrigé
Que fait la valeur 'aspect-ratio: 16 / 9' ?
A. Elle divise la largeur par 16
B. Elle maintient un rapport de forme fixe peu importe la largeur
C. Elle agrandit l'image 16 fois
D. Elle ne fonctionne que pour les vidéos
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Elle évite le décalage de mise en page (layout shift) lors du chargement.
QCM
19
Corrigé
Quelle propriété CSS permet de cacher un élément sur mobile mais de l'afficher sur desktop via les media queries ?
A. visibility
B. display
C. opacity
D. overflow
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
display: none retire l'élément du flux, contrairement à visibility: hidden.
QCM
20
Corrigé
Que signifie l'opérateur 'and' dans une media query ?
A. Il combine plusieurs conditions (ex: écran ET largeur min)
B. Il crée une alternative (OU)
C. Il annule la condition
D. Il n'existe pas en CSS
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Exemple : @media screen and (min-width: 480px).
QCM
21
Corrigé
Comment s'appelle l'unité relative à la largeur du caractère '0' ?
A. ex
B. ch
C. cap
D. ic
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'unité ch est idéale pour limiter la largeur d'un paragraphe à environ 60-80 caractères.
QCM
22
Corrigé
Quelle est l'utilité du mot-clé 'only' dans '@media only screen' ?
A. Il rend le site plus rapide
B. Il empêche les très vieux navigateurs de lire la règle
C. Il force l'affichage sur un seul écran
D. Il n'est plus utilisé en 2024
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est une ancienne pratique pour la compatibilité avec des navigateurs comme IE6.
QCM
23
Corrigé
En CSS, que permet la fonction calc(100% - 20px) ?
A. Elle ne fonctionne pas avec des unités différentes
B. Elle mélange des unités relatives et absolues pour un calcul dynamique
C. Elle divise le site en 20 colonnes
D. Elle réduit la résolution
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est l'un des outils les plus puissants pour le positionnement précis.
QCM
24
Corrigé
Quelle media query permet de détecter si l'utilisateur a activé le 'Mode Sombre' sur son système ?
A. @media (theme: dark)
B. @media (prefers-color-scheme: dark)
C. @media (color-mode: night)
D. @media (system-style: dark)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est une media query axée sur les préférences utilisateur (User Preferences).
QCM
25
Corrigé
Quel est le 'breakpoint' (point de rupture) généralement admis pour le passage smartphone / tablette ?
A. 320px
B. 768px
C. 1024px
D. 1920px
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Bien que variable, 768px est la largeur historique de l'iPad en portrait.
QCM
26
Corrigé
Que fait 'flex-direction: column-reverse' sur mobile ?
A. Il cache la colonne
B. Il empile les éléments verticalement mais inverse leur ordre HTML
C. Il met le texte à l'envers
D. Il supprime le mode flex
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Très utile pour placer une image au-dessus du texte sur mobile alors qu'elle est dessous en HTML.
QCM
27
Corrigé
Quelle propriété CSS permet de gérer la coupure des mots longs pour éviter qu'ils ne fassent déborder un conteneur sur mobile ?
A. word-break: break-word;
B. text-align: justify;
C. overflow: scroll;
D. font-size: small;
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Essentiel pour les titres très longs ou les URLs sur petits écrans.
QCM
28
Corrigé
L'unité 'rem' est-elle impactée par la taille de police du parent ?
A. Oui, toujours
B. Non, elle ne dépend que de la racine (html)
C. Seulement sur Safari
D. Seulement dans les formulaires
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est la différence majeure avec l'unité 'em'.
QCM
29
Corrigé
Que signifie le type de média 'print' dans une media query ?
A. L'affichage sur les écrans haute définition
B. Le style appliqué lors de l'impression du document
C. La police de caractères
D. Le mode liseuse
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
@media print permet de masquer les menus ou publicités pour l'impression papier.
QCM
30
Corrigé
Quel sélecteur permet de cibler un appareil où l'utilisateur utilise un pointeur imprécis (comme un doigt sur un écran tactile) ?
A. @media (pointer: coarse)
B. @media (touch: active)
C. @media (input: finger)
D. @media (pointer: fine)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
Permet d'agrandir les boutons pour faciliter le clic tactile.
Mots & Définitions
Consultez les définitions des termes importants.
Le responsive design est une approche qui consiste à adapter l’affichage d’un site à toutes les tailles d’écran. Il repose sur des mises en page flexibles, des images adaptatives et des règles conditionnelles. L’objectif est d’offrir une expérience confortable sur mobile, tablette et ordinateur.
Le viewport correspond à la zone visible d’une page dans le navigateur, c’est-à-dire l’espace réellement affiché à l’écran. Sur mobile, cette notion est cruciale car elle influence le zoom et la largeur de rendu. Beaucoup d’unités et de media queries se basent directement sur le viewport.
La balise meta viewport indique au navigateur mobile comment ajuster la largeur et l’échelle de la page. Elle évite l’affichage « zoomé » par défaut et permet un rendu adapté à l’appareil. C’est une base indispensable pour un site responsive.
Une media query est une règle CSS conditionnelle qui applique des styles selon les caractéristiques de l’appareil ou du navigateur. Elle peut cibler la largeur, l’orientation, la résolution ou les préférences utilisateur. C’est un outil clé pour adapter une interface aux différents contextes.
Un breakpoint est une largeur d’écran à partir de laquelle on change l’organisation ou le style d’une interface. Il sert à ajuster la mise en page pour rester lisible et agréable. Les breakpoints sont choisis en fonction du contenu, pas uniquement des appareils.
Mobile First consiste à concevoir d’abord l’interface pour les petits écrans, puis à enrichir progressivement pour les écrans plus larges. Cette méthode favorise la performance et la clarté du design. Elle aide aussi à prioriser l’essentiel du contenu.
Les unités viewport sont des unités relatives à la taille de la fenêtre d’affichage. Elles permettent de définir des dimensions qui s’adaptent automatiquement à l’écran. Elles sont utiles pour des sections pleine hauteur, des typographies fluides ou des espacements proportionnels.
L’unité rem est basée sur la taille de police définie à la racine du document, généralement sur l’élément html. Elle permet une mise à l’échelle cohérente de toute l’interface. Elle est très appréciée pour l’accessibilité et la stabilité du design.
L’unité em est relative à la taille de police de l’élément concerné, ce qui la rend pratique pour dimensionner des espacements liés au texte. Elle permet de créer des composants qui s’ajustent naturellement quand la taille du texte change. Elle peut cependant varier selon le contexte, ce qui demande de la rigueur.
La fonction clamp() permet de définir une valeur fluide encadrée par un minimum et un maximum. Elle est très utilisée pour la typographie responsive, car elle évite des changements brusques. Elle offre un contrôle précis tout en gardant un comportement adaptable.
La fonction calc() permet d’effectuer un calcul en CSS en combinant des unités différentes, comme des pourcentages et des pixels. Elle sert à créer des tailles dynamiques adaptées au contexte. C’est un outil utile pour ajuster des largeurs, des marges ou des positionnements.
La fonction min() renvoie la plus petite valeur parmi plusieurs options CSS. Elle aide à éviter que certains éléments deviennent trop grands dans des contextes variables. On l’utilise souvent pour garder une mise en page maîtrisée sur des écrans larges.
Max-width fixe une largeur maximale qu’un élément ne dépassera pas, même si l’écran est très large. Cela permet de garder un contenu lisible et bien proportionné. Associée à une largeur fluide, elle offre un bon équilibre entre flexibilité et contrôle.
Les images responsives permettent au navigateur de choisir la meilleure image selon la taille d’écran et la densité de pixels. Cela améliore la netteté sur les écrans haute définition et réduit le poids sur mobile. Le chargement devient plus intelligent et plus performant.
L’art direction consiste à proposer des versions d’images différentes selon le contexte, pas seulement des tailles différentes. On peut ainsi changer le cadrage ou le format pour mieux s’adapter à l’écran. Cette technique améliore fortement l’impact visuel et la lisibilité.
Object-fit contrôle la manière dont une image ou une vidéo s’adapte à son conteneur. Il permet de conserver les proportions sans déformation, avec différentes stratégies d’affichage. C’est très utile pour des cartes, des bannières ou des vignettes.
Aspect-ratio permet de conserver une proportion fixe entre la largeur et la hauteur d’un élément. Cela stabilise la mise en page, même avant le chargement d’une image ou d’une vidéo. C’est un excellent outil pour éviter les sauts de contenu.
Un écran haute densité affiche plus de pixels sur une même surface, ce qui rend les images plus nettes. En CSS, on peut adapter certains styles à ces écrans via des conditions liées à la résolution. Cela permet d’optimiser la qualité d’affichage sans alourdir tous les appareils.
Certaines media queries permettent de détecter des préférences système, comme l’activation du mode sombre. Cela aide à adapter le thème d’un site au confort visuel de l’utilisateur. C’est un aspect important de l’accessibilité moderne.
Le type de média print permet d’appliquer des styles spécifiques lors de l’impression d’une page. On peut ajuster les couleurs, masquer des éléments inutiles ou optimiser la mise en page papier. Cela rend le document plus propre et plus lisible une fois imprimé.
Pointer coarse indique que l’utilisateur interagit avec un pointeur imprécis, comme un doigt sur écran tactile. Cette information permet d’adapter la taille des boutons, les espacements et certaines interactions. Elle contribue à une meilleure ergonomie sur mobile.
La coupure des mots sert à éviter qu’un texte trop long dépasse de son conteneur, surtout sur mobile. Elle force un retour à la ligne lorsque nécessaire. Cela protège la mise en page et améliore la lisibilité.
À propos de ce QCM
L
es thèmes abordés dans ces QCM couvrent l’essentiel des techniques utilisées pour créer des interfaces adaptatives et robustes.
Ils reposent d’abord sur la compréhension du viewport et de son rôle dans l’affichage, en particulier sur mobile.
Savoir comment le navigateur calcule l’espace disponible permet d’éviter des erreurs fréquentes de mise en page et de garantir une expérience cohérente.
Une autre partie importante concerne l’usage des unités relatives et des fonctions CSS modernes.
Ces outils rendent possible la création de tailles fluides, capables de s’ajuster progressivement sans rupture brutale.
Ils sont particulièrement utiles pour la typographie, les espacements et les largeurs maximales, contribuant ainsi à une meilleure lisibilité sur tous les écrans.
Les QCM mettent également en avant l’importance des images adaptatives et de l’art direction.
Bien gérer les images, c’est à la fois améliorer la performance du site et offrir un rendu visuel de qualité, y compris sur les écrans haute densité.
Cette compétence est aujourd’hui incontournable dans un contexte où la vitesse de chargement est un critère clé.
Enfin, les règles conditionnelles et les préférences utilisateur occupent une place centrale.
Elles permettent d’adapter l’interface selon l’orientation de l’écran, le mode sombre ou encore le type d’interaction.
Travailler ces notions développe une capacité d’analyse, d’auto-évaluation et de raisonnement technique, tout en préparant efficacement aux exigences académiques et professionnelles du web moderne.
Conclusion
C
es QCM constituent un support pédagogique solide pour approfondir la compréhension du responsive design et des mécanismes qui le sous-tendent.
Ils permettent de consolider des notions essentielles tout en développant une réflexion globale sur l’adaptation des interfaces aux usages réels.
En s’entraînant régulièrement, l’apprenant gagne en assurance, affine ses choix techniques et progresse de manière structurée.
Cette démarche favorise une montée en compétences durable, indispensable pour réussir dans les études, les concours ou les projets professionnels liés au développement web.
