Responsive design avec SCSS

Mobile-first : le réflexe à adopter

L'approche mobile-first consiste à écrire d'abord les styles pour petit écran, puis à ajouter des améliorations pour les écrans plus grands via @media (min-width: ...).

• Base simple et légère (mobile).
• Améliorations progressives (tablette, desktop).
• Meilleure cohérence globale.

Breakpoints : centraliser pour éviter le chaos

Un breakpoint, c'est une largeur d'écran à partir de laquelle tu changes la mise en page. L'erreur classique : écrire 783px ici, 820px là, 991px ailleurs… sans logique.

Avec SCSS, on centralise dans une map.

3 styles responsives fréquents

• Layout : passer de 1 colonne à 2-3 colonnes.
• Typographie : ajuster légèrement les tailles.
• Espacements : augmenter padding/margin sur grand écran.

Définir des breakpoints dans une map

SCSS :

$breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1280px
);

Mixin responsive réutilisable (mobile-first)

On crée une mixin mq() qui prend une clé (md, lg…).

SCSS :

$breakpoints: (
  md: 768px,
  lg: 1024px
);

@mixin mq($key) {
  @if map-has-key($breakpoints, $key) {
    @media (min-width: map-get($breakpoints, $key)) {
      @content;
    }
  } @else {
    @warn "Breakpoint inconnu : #{$key}";
  }
}

.card {
  padding: 12px;

  @include mq(md) {
    padding: 16px;
  }

  @include mq(lg) {
    padding: 24px;
  }
}

CSS généré :

.card {
  padding: 12px;
}

@media (min-width: 768px) {
  .card {
    padding: 16px;
  }
}

@media (min-width: 1024px) {
  .card {
    padding: 24px;
  }
}

Cas pro 1 : grille responsive simple

Sur mobile : 1 colonne. Sur tablette : 2 colonnes. Sur desktop : 3 colonnes.

SCSS :

$breakpoints: (
  md: 768px,
  lg: 1024px
);

@mixin mq($key) {
  @media (min-width: map-get($breakpoints, $key)) {
    @content;
  }
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;

  @include mq(md) {
    grid-template-columns: repeat(2, 1fr);
  }

  @include mq(lg) {
    grid-template-columns: repeat(3, 1fr);
  }
}

Cas pro 2 : responsive spacing (espacements)

On augmente progressivement les espacements sur les écrans plus grands.

SCSS :

$breakpoints: (
  md: 768px,
  lg: 1024px
);

@mixin mq($key) {
  @media (min-width: map-get($breakpoints, $key)) {
    @content;
  }
}

.section {
  padding: 16px;

  @include mq(md) {
    padding: 24px;
  }

  @include mq(lg) {
    padding: 40px;
  }
}

Cas pro 3 : responsive "composant" propre (pattern recommandé)

Un bon réflexe : garder le responsive au niveau du composant, pas "au hasard" dans le projet.

SCSS :

$breakpoints: (
  md: 768px,
  lg: 1024px
);

@mixin mq($key) {
  @media (min-width: map-get($breakpoints, $key)) { @content; }
}

.card {
  display: grid;
  gap: 12px;
  padding: 16px;

  .card__media {
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
  }

  .card__content {
    display: grid;
    gap: 8px;
  }

  @include mq(md) {
    grid-template-columns: 220px 1fr;
    align-items: center;
  }

  @include mq(lg) {
    grid-template-columns: 280px 1fr;
  }
}

CSS généré (extrait pour md) :

.card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.card .card__media {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
}

.card .card__content {
  display: grid;
  gap: 8px;
}

@media (min-width: 768px) {
  .card {
    grid-template-columns: 220px 1fr;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .card {
    grid-template-columns: 280px 1fr;
  }
}

• Adopter mobile-first (min-width) sauf exception.
• Centraliser les breakpoints dans une map.
• Créer une mixin mq() unique pour tout le projet.
• Garder les media queries proches du composant concerné.
• Limiter le nombre de breakpoints : 3–5 suffisent souvent.
• Utiliser des noms sémantiques (sm, md, lg) plutôt que des noms d'appareils.

Erreur 1 : breakpoints incohérents

Des breakpoints "au hasard" rendent le responsive difficile à raisonner. Centralise et nomme tes breakpoints pour une cohérence globale.

Erreur 2 : duplication de media queries

Réécrire des @media partout au lieu d'utiliser une mixin crée vite un code lourd et répétitif. Une seule mixin bien conçue suffit.

Erreur 3 : trop de surcharges desktop-first

Si tu pars du desktop et que tu "démontes" tout pour mobile, tu finis souvent avec des exceptions. Mobile-first est plus naturel et produit généralement moins de code.