Design Responsive

Maîtrisez les techniques modernes de responsive design pour créer des interfaces qui s'adaptent parfaitement à tous les appareils et contextes d'écran.

Quand utiliser cette compétence

Implémenter des mises en page mobile-first responsive
Utiliser les container queries pour une réactivité basée sur les composants
Créer une typographie fluide et des échelles d'espacement
Construire des mises en page complexes avec CSS Grid et Flexbox
Concevoir des stratégies de breakpoints pour les systèmes de design
Implémenter des images et médias responsive
Créer des motifs de navigation adaptatifs
Construire des tableaux et affichages de données responsive

Capacités fondamentales

1. Container Queries

Réactivité au niveau du composant indépendante du viewport
Unités de container queries (cqi, cqw, cqh)
Style queries pour un styling conditionnel
Fallbacks pour la compatibilité navigateurs

2. Typographie et espacement fluides

CSS clamp() pour l'évolution fluide
Unités relatives au viewport (vw, vh, dvh)
Échelles de type fluide avec limites min/max
Systèmes d'espacement responsive

3. Motifs de mise en page

CSS Grid pour les mises en page 2D
Flexbox pour la distribution 1D
Mises en page intrinsèques (dimensionnement basé sur le contenu)
Subgrid pour l'alignement de grille imbriquée

4. Stratégie de breakpoints

Media queries mobile-first
Breakpoints basés sur le contenu
Intégration de design tokens
Feature queries (@supports)

Référence rapide

Échelle de breakpoints moderne

/* Breakpoints mobile-first */
/* Base: Mobile (< 640px) */
@media (min-width: 640px) {
  /* sm: Téléphones en paysage, petites tablettes */
}
@media (min-width: 768px) {
  /* md: Tablettes */
}
@media (min-width: 1024px) {
  /* lg: Ordinateurs portables, petits bureaux */
}
@media (min-width: 1280px) {
  /* xl: Bureaux */
}
@media (min-width: 1536px) {
  /* 2xl: Grands bureaux */
}

/* Équivalent Tailwind CSS */
/* sm:  @media (min-width: 640px) */
/* md:  @media (min-width: 768px) */
/* lg:  @media (min-width: 1024px) */
/* xl:  @media (min-width: 1280px) */
/* 2xl: @media (min-width: 1536px) */

Motifs clés

Motif 1 : Container Queries

/* Définir un contexte de confinement */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Requêter le container, pas le viewport */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }

  .card-image {
    aspect-ratio: 1;
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 250px 1fr;
  }

  .card-title {
    font-size: 1.5rem;
  }
}

/* Unités de container query */
.card-title {
  /* 5% de la largeur du container, limité entre 1rem et 2rem */
  font-size: clamp(1rem, 5cqi, 2rem);
}

// Composant React avec container queries
function ResponsiveCard({ title, image, description }) {
  return (
    <div className="@container">
      <article className="flex flex-col @md:flex-row @md:gap-4">
        <img
          src={image}
          alt=""
          className="w-full @md:w-48 @lg:w-64 aspect-video @md:aspect-square object-cover"
        />
        <div className="p-4 @md:p-0">
          <h2 className="text-lg @md:text-xl @lg:text-2xl font-semibold">
            {title}
          </h2>
          <p className="mt-2 text-muted-foreground @md:line-clamp-3">
            {description}
          </p>
        </div>
      </article>
    </div>
  );
}

Motif 2 : Typographie fluide

/* Échelle de type fluide utilisant clamp() */
:root {
  /* Taille min, préférée (fluide), taille max */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
}

/* Utilisation */
h1 {
  font-size: var(--text-4xl);
}
h2 {
  font-size: var(--text-3xl);
}
h3 {
  font-size: var(--text-2xl);
}
p {
  font-size: var(--text-base);
}

/* Échelle d'espacement fluide */
:root {
  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --space-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}

// Fonction utilitaire pour les valeurs fluides
function fluidValue(
  minSize: number,
  maxSize: number,
  minWidth = 320,
  maxWidth = 1280,
) {
  const slope = (maxSize - minSize) / (maxWidth - minWidth);
  const yAxisIntersection = -minWidth * slope + minSize;

  return `clamp(${minSize}rem, ${yAxisIntersection.toFixed(4)}rem + ${(slope * 100).toFixed(4)}vw, ${maxSize}rem)`;
}

// Générer une échelle de type fluide
const fluidTypeScale = {
  sm: fluidValue(0.875, 1),
  base: fluidValue(1, 1.125),
  lg: fluidValue(1.25, 1.5),
  xl: fluidValue(1.5, 2),
  "2xl": fluidValue(2, 3),
};

Motif 3 : Mise en page responsive CSS Grid

/* Grille auto-fit - les éléments s'enroulent automatiquement */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

/* Grille auto-fill - maintient les colonnes vides */
.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

/* Grille responsive avec zones nommées */
.page-layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  gap: 1rem;
}

@media (min-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header header"
      "main sidebar"
      "footer footer";
  }
}

@media (min-width: 1024px) {
  .page-layout {
    grid-template-columns: 250px 1fr 300px;
    grid-template-areas:
      "header header header"
      "nav main sidebar"
      "footer footer footer";
  }
}

.header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
}

// Composant grille responsive
function ResponsiveGrid({ children, minItemWidth = "250px", gap = "1.5rem" }) {
  return (
    <div
      className="grid"
      style={{
        gridTemplateColumns: `repeat(auto-fit, minmax(min(${minItemWidth}, 100%), 1fr))`,
        gap,
      }}
    >
      {children}
    </div>
  );
}

// Utilisation avec Tailwind
function ProductGrid({ products }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
      {products.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Motif 4 : Navigation responsive

function ResponsiveNav({ items }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="relative">
      {/* Bouton de menu mobile */}
      <button
        className="lg:hidden p-2"
        onClick={() => setIsOpen(!isOpen)}
        aria-expanded={isOpen}
        aria-controls="nav-menu"
      >
        <span className="sr-only">Activer/désactiver la navigation</span>
        {isOpen ? <X /> : <Menu />}
      </button>

      {/* Liens de navigation */}
      <ul
        id="nav-menu"
        className={cn(
          // Base: caché sur mobile
          "absolute top-full left-0 right-0 bg-background border-b",
          "flex flex-col",
          // Mobile: glisse vers le bas
          isOpen ? "flex" : "hidden",
          // Bureau: toujours visible, horizontal
          "lg:static lg:flex lg:flex-row lg:border-0 lg:bg-transparent",
        )}
      >
        {items.map((item) => (
          <li key={item.href}>
            <a
              href={item.href}
              className={cn(
                "block px-4 py-3",
                "lg:px-3 lg:py-2",
                "hover:bg-muted lg:hover:bg-transparent lg:hover:text-primary",
              )}
            >
              {item.label}
            </a>
          </li>
        ))}
      </ul>
    </nav>
  );
}

Motif 5 : Images responsive

// Image responsive avec art direction
function ResponsiveHero() {
  return (
    <picture>
      {/* Art direction: cadrage différent selon les écrans */}
      <source
        media="(min-width: 1024px)"
        srcSet="/hero-wide.webp"
        type="image/webp"
      />
      <source
        media="(min-width: 768px)"
        srcSet="/hero-medium.webp"
        type="image/webp"
      />
      <source srcSet="/hero-mobile.webp" type="image/webp" />

      {/* Fallback */}
      <img
        src="/hero-mobile.jpg"
        alt="Description de l'image hero"
        className="w-full h-auto"
        loading="eager"
        fetchpriority="high"
      />
    </picture>
  );
}

// Image responsive avec srcset pour la commutation de résolution
function ProductImage({ product }) {
  return (
    <img
      src={product.image}
      srcSet={`
        ${product.image}?w=400 400w,
        ${product.image}?w=800 800w,
        ${product.image}?w=1200 1200w
      `}
      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
      alt={product.name}
      className="w-full h-auto object-cover"
      loading="lazy"
    />
  );
}

Motif 6 : Tableaux responsive

// Tableau responsive avec défilement horizontal
function ResponsiveTable({ data, columns }) {
  return (
    <div className="w-full overflow-x-auto">
      <table className="w-full min-w-[600px]">
        <thead>
          <tr>
            {columns.map((col) => (
              <th key={col.key} className="text-left p-3">
                {col.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, i) => (
            <tr key={i} className="border-t">
              {columns.map((col) => (
                <td key={col.key} className="p-3">
                  {row[col.key]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// Tableau en cartes pour mobile
function ResponsiveDataTable({ data, columns }) {
  return (
    <>
      {/* Tableau bureau */}
      <table className="hidden md:table w-full">
        {/* ... tableau standard */}
      </table>

      {/* Cartes mobile */}
      <div className="md:hidden space-y-4">
        {data.map((row, i) => (
          <div key={i} className="border rounded-lg p-4 space-y-2">
            {columns.map((col) => (
              <div key={col.key} className="flex justify-between">
                <span className="font-medium text-muted-foreground">
                  {col.label}
                </span>
                <span>{row[col.key]}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
    </>
  );
}

Unités de viewport

/* Unités viewport standard */
.full-height {
  height: 100vh; /* Peut causer des problèmes sur mobile */
}

/* Unités viewport dynamiques (recommandé pour mobile) */
.full-height-dynamic {
  height: 100dvh; /* Prend en compte l'interface du navigateur mobile */
}

/* Viewport petit (minimum) */
.min-full-height {
  min-height: 100svh;
}

/* Viewport grand (maximum) */
.max-full-height {
  max-height: 100lvh;
}

/* Dimensionnement de police relatif au viewport */
.hero-title {
  /* 5vw avec limites min/max */
  font-size: clamp(2rem, 5vw, 4rem);
}

Bonnes pratiques

Mobile-First : Commencez par les styles mobiles, améliorez pour les grands écrans
Breakpoints basés sur le contenu : Définissez les breakpoints selon le contenu, pas les appareils
Fluide plutôt que fixe : Utilisez des valeurs fluides pour la typographie et l'espacement
Container Queries : Utilisez pour la réactivité au niveau des composants
Testez sur de vrais appareils : Les simulateurs ne détectent pas tous les problèmes
Performance : Optimisez les images, chargement différé du contenu hors écran
Zones tactiles : Maintenez un minimum de 44 × 44 px sur mobile
Propriétés logiques : Utilisez inline/block pour l'internationalisation

Problèmes courants

Débordement horizontal : Contenu sortant du viewport
Largeurs fixes : Utiliser px au lieu d'unités relatives
Hauteur du viewport : Problèmes avec 100vh sur les navigateurs mobiles
Taille de police : Texte trop petit sur mobile
Zones tactiles : Boutons trop petits pour être tapotés avec précision
Ratio d'aspect : Images qui s'écrasent ou s'étirent
Empilement Z-Index : Les superpositions cassées sur différents écrans

responsive-design

Design Responsive

Quand utiliser cette compétence

Capacités fondamentales

1. Container Queries

2. Typographie et espacement fluides

3. Motifs de mise en page

4. Stratégie de breakpoints

Référence rapide

Échelle de breakpoints moderne

Motifs clés

Motif 1 : Container Queries

Motif 2 : Typographie fluide

Motif 3 : Mise en page responsive CSS Grid

Motif 4 : Navigation responsive

Motif 5 : Images responsive

Motif 6 : Tableaux responsive

Unités de viewport

Bonnes pratiques

Problèmes courants

Skills similaires