 Dans cette vidéo, nous allons voir les espacements qui sont dynamiques. Qu'est-ce que ça veut dire un espacement dynamique ? Je te montre, j'ai une page de démonstration. Et si je prends la marge qui est interne que j'ai appliqué à trois blocs, donc j'ai trois valeurs, normal, moyen et grand. Quand je redimensionne la page, tu vois que l'espace interne s'adapte automatiquement en fonction de la taille de la fenêtre. Pour ça, j'utilise aucune média query, j'utilise juste les réglages natifs du FSE. Il y a juste une manière de faire. Je te montre comment est configuré la page dans le back-office. Dans la structure, à chaque fois, j'ai fait un groupe, j'ai renommé le groupe. Donc ça, c'est possible depuis la 6.4. Tu prends les trois petits points et on peut renommé. Et j'ai plutôt appliqué la marge interne sur le groupe parce que c'est plus facile à gérer par rapport au paragraph. C'est surtout l'idée de pouvoir mettre plusieurs blocs à chaque fois dans ce groupe. Donc j'ai juste un paragraph. Et quand je vais dans normal, si je vais dans les styles, le premier, il est réglé sur normal. Alors j'ai trois valeurs que j'ai appliquées. J'ai normal, j'ai moyen et j'ai grand. Ensuite, moyen, j'ai fait la même chose, sauf que j'ai appliqué moyen et grand, pareil. Je te montre ce que ça donne dans le fichier de code. Je suis dans le fichier temp.json. C'est l'objet qui s'appelle spacing. C'est un objet interne à settings. Et j'ai déclaré trois tailles d'espacement. Alors à chaque fois, on a le name, le slog, le size. Je reviens pas trop sur ça. Ce qui est important ici, c'est de régler la valeur size. Et on utilise pour ça la fonction CSS qui s'appelle clamp. Alors l'élément des clencheurs entre la première valeur et la dernière valeur, ces petits écrans, grands écrans, eh bien c'est la valeur du milieu, qui n'est pas évident à calculer comme ça. Au début, je le faisais avec le pourcentage. Ça marche beaucoup mieux avec la taille de la fenêtre. Donc c'est view wheat. Pour faire mes calculs, j'utilise un site qui s'appelle Fluid Typographie. Donc à la base, le nom l'a dit clairement, c'est pour les polices de caractère, mais ça marche très bien pour les espacements. Donc là, j'ai rentré mes deux valeurs. Donc la valeur que je veux de début pour les petits écrans qui est 4M et la valeur pour les grands écrans qui est de 8M. La notion de petit et grand écrans, tu peux l'ajuster sur la droite. Donc là, ça va de 700 à 1000. Ensuite, je récupère cette valeur. J'ai pas besoin de font size. Je suis reparti dans mon code et donc là, je change ma size. Ce qui est déjà la bonne, c'est juste pour te montrer le processus. Donc là, j'enregistre et j'ai ma nouvelle valeur qui est rentrée. Ensuite, je te montre. Donc là, je passe de 4 à 8M et tu vas voir que ça marche nickel quand je te fais la démonstration en ligne. Je suis reparti en front et je vais te faire la démonstration sur le dernier bloc qui correspond à la valeur grand. Donc si j'ai la taille de la fenêtre, regardez ici, je suis au-dessus de 1000, ma valeur de padding est à 128. 128, qu'est-ce que ça donne en REM ? Souviens-toi, j'étais entre 4 et 8. Pour avoir la valeur, tu prends 128 et tu divises par 16. Alors ça, ça veut dire que c'est ton navigateur qui est sur une base de 16 pixels. La plupart du temps, c'est le réglage par défaut. Évidemment, si ton navigateur a un autre réglage, il faudrait diviser par l'autre valeur. Mais 16, c'est le standard. Donc là, je suis à une valeur de 8 REM, donc ça, c'est parfait. C'est ce que j'avais réglé. Et si je suis en-dessous de 1000, tu vois là, je suis à 1220, si on descend jusqu'à 700 et on va pas en-dessous, et bien regarde, je passe à 64. Je refais le calcul. Et donc là, j'arrive à 4 REM. On a un parfait contrôle sur les espaces manques. Et ce qui est magique, c'est que je n'utilise aucune médiacourie. C'est complètement dynamique.