Adloun

CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 9 · Application directe du cours

Calculer un clamp()

Responsive design · niveau 1 (application)

Énoncé

Le chapeau d'une page a pour taille font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem) (1rem vaut 16 pixels).

Calculer la taille obtenue dans des fenêtres de 320, 600 et 1000 pixels.
À partir de quelle largeur la taille cesse-t-elle d'être minimale ? À partir de quelle largeur atteint-elle son maximum ?

L'idéal vaut $0, 5 \times 16 = 8$ pixels plus $2%$ de la largeur $L$ ; les bornes sont 16 et 24 pixels.

$L = 320$ : $8 + 6, 4 = 14, 4$ , inférieur au minimum : 16 pixels. $L = 600$ : $8 + 12 = 20$ pixels. $L = 1000$ : $8 + 20 = 28$ , supérieur au maximum : 24 pixels.
La taille quitte le minimum quand $8 + 0, 02 L > 16$ , soit $L > 400$ pixels ; elle atteint le maximum quand $8 + 0, 02 L = 24$ , soit $L = 800$ pixels.

Chromium calcule 16, 20 et 24 pixels (page code/ch9/exercices/clamp.html, à tester à ces trois largeurs dans le mode appareil).

100 % gratuit

La suite du chapitre est sur Adloun

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.