[FRONT] Remplacer un maximum de media queries avec des clamp

[Mintoo200]

Contexte

On a beaucoup d'endroits où on a des media queries comme ça :

  &:not(:last-of-type) {
    margin-bottom: 1rem;

    @include utilities-deprecated.media(xlarge) {
      margin-bottom: 2rem;
    }
  }

ou encore :

@mixin title-large {
  font-size: 1.5rem;
  line-height: 1.4;

  @include mixins.media(large) {
    font-size: 1.75rem;
  }
}

Solutions Envisagées

Il serait plus cohérent d'avoir un "redimensionnement continu" plutôt qu'un breakpoint. (en plus, ça nous évite une media query, ce qui est toujours bienvenu) (ce qui, soit dit en passant, permettrait aussi d'utiliser la hauteur d'écran comme proportion sans ajouter des media queries en plus dans notre code, et donc gérer plus intelligemment les téléphones en paysage ou écrans en portrait) On peut donc avoir :

  &:not(:last-of-type) {
    margin-bottom: clamp(1rem, <x>vh, 2rem);
  }

ou encore :

@mixin title-large {
  line-height: 1.4;
  font-size: clamp(1.5rem, <x>vw, 1.75rem);
}

Conséquences

:)

[Mintoo200]

Faire un test pour mesurer l'impact puis faire un ADR