wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

QCM – Responsive Design

Total questions: 10

Worksheet time: 5mins

Name
Class
Date
1.

Pourquoi le responsive design est-il indispensable aujourd’hui ?

a)

Parce qu’il permet de charger plus vite les images

b)

Parce que plus de 60% des utilisateurs naviguent sur mobile

c)

Parce qu’il remplace le HTML

d)

Parce qu’il évite d’écrire du CSS

2.

Quelle unité est considérée comme flexible et adaptée au responsive ?

a)

px

b)

cm

c)

%

d)

kg

3.

Quel est le rôle d’une media query ?

a)

Créer un menu interactif

b)

Modifier le HTML selon l’utilisateur

c)

Modifier le CSS en fonction de la taille d’écran

d)

Ajouter des animations CSS

4.

Quel code déclenche un style spécifique pour les écrans ≤ 768px ?

a)

@responsive (768px)

b)

@screen and (min:768)

c)

@media screen and (max-width: 768px)

d)

@device mobile(768)

5.

Sur mobile, comment rendre deux colonnes verticales avec Flexbox ?

a)

flex-wrap: nowrap;

b)

flex-direction: column;

c)

justify-content: center;

d)

display: block;

6.

Quelle règle permet d’empêcher une image de dépasser sur mobile ?

a)

img { position: absolute; }

b)

img { max-width: 300px; }

c)

img { width: 100%; height: auto; }

d)

img { flex-direction: column; }

7.

Quelle taille de texte est adaptée aux écrans mobiles selon le cours ?

a)

10px

b)

14px

c)

50px

d)

6px

8.

Pourquoi ne pas faire de menu burger dans le module ?

a)

Parce que c’est interdit

b)

Parce que c’est trop complexe pour ce niveau et ce planning

c)

Parce que ça ne fonctionne pas en responsive

d)

Parce que les menus burger sont dépassés

9.

Dans un formulaire, quel attribut HTML rend un champ obligatoire ?

a)

selected

b)

autofocus

c)

required

d)

name

10.

Quelle propriété CSS rend un formulaire vertical et bien espacé ?

a)

display: inline;

b)

flex-direction: row;

c)

gap: -10px;

d)

display: flex; flex-direction: column; gap: 10px;