Introduction

En 2024, plus de 60% du trafic web mondial provient d’appareils mobiles. Le design responsive n’est plus une option, c’est une nécessité. Google privilégie les sites mobile-friendly dans son classement, et les utilisateurs abandonnent les sites non optimisés en moins de 3 secondes.

Dans cet article, vous découvrirez l’approche mobile-first, comprendrez le système de breakpoints, et apprendrez à créer des interfaces qui s’adaptent parfaitement à tous les écrans.

Qu’est-ce que le design responsive ?

Le design responsive est une approche qui permet à un site web de s’adapter automatiquement à la taille de l’écran de l’utilisateur, qu’il utilise un smartphone, une tablette, un ordinateur portable ou un grand écran desktop.

Les trois piliers du responsive

1. Grilles fluides (Fluid Grids)

Des layouts basés sur des pourcentages plutôt que des pixels fixes.

/ Mauvais exemple - Largeurs fixes /
.container-bad {
  width: 960px;  / Ne s'adapte pas /
}

.sidebar-bad {
  width: 300px;  / Rigide /
}

/ Bon exemple - Largeurs fluides /
.container-good {
  width: 90%;
  max-width: 1200px;  / Limite sur grands écrans /
  margin: 0 auto;
  padding: 0 1rem;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/ Les colonnes s'adaptent automatiquement /
.card {
  background: #ffffff;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

2. Images flexibles

Images qui s’adaptent à leur conteneur.

/ Images responsive de base /
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/ Image avec ratio préservé /
.image-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;  / Ratio 16:9 (9/16  100) /
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  / Remplit le conteneur en gardant le ratio /
}

/ Images responsive modernes avec aspect-ratio /
.modern-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 0.5rem;
}

/ Images adaptatives (différentes images selon l'écran) /

3. Media queries

Règles CSS qui s’appliquent selon les caractéristiques de l’appareil.

/ Media query de base /
.element {
  font-size: 1rem;
  padding: 1rem;
}

@media (min-width: 768px) {
  .element {
    font-size: 1.125rem;
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .element {
    font-size: 1.25rem;
    padding: 2rem;
  }
}

L’approche Mobile-First

Pourquoi mobile-first ?

Avantages :

• Performance : Chargez d’abord le minimum, ajoutez pour les écrans plus grands
• Priorité au contenu : Force à identifier l’essentiel
• Progressive Enhancement : Amélioration progressive de l’expérience
• SEO : Google indexe la version mobile en priorité
• Réalité du marché : La majorité des utilisateurs sont sur mobile

Desktop-first vs Mobile-first

/ DESKTOP-FIRST (approche traditionnelle - à éviter) /
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  / 4 colonnes par défaut /
  gap: 2rem;
  padding: 3rem;
  font-size: 1.125rem;
}

/ On retire des fonctionnalités en descendant /
@media (max-width: 1024px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    padding: 1rem;
    font-size: 1rem;
  }
}

/ MOBILE-FIRST (approche moderne - recommandée) /
.container {
  display: grid;
  grid-template-columns: 1fr;  / 1 colonne par défaut (mobile) /
  gap: 1rem;
  padding: 1rem;
  font-size: 1rem;
}

/ On ajoute des fonctionnalités en montant /
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 3rem;
    font-size: 1.125rem;
  }
}

HTML de base responsive

  

  
  

  
  

  


  



Attention : Sans , votre site s’affichera comme si l’écran faisait 980px sur mobile !
Système de breakpoints
Breakpoints standards
Les breakpoints sont les points de rupture où le design s’adapte. Voici les standards de l’industrie :
/ Système de breakpoints moderne (basé sur Tailwind CSS) /
:root {
  / Mobile first : pas de breakpoint pour mobile /
  --screen-sm: 640px;   / Petites tablettes /
  --screen-md: 768px;   / Tablettes /
  --screen-lg: 1024px;  / Desktop /
  --screen-xl: 1280px;  / Large desktop /
  --screen-2xl: 1536px; / Très large desktop /
}

/ Usage /
/ Mobile (défaut) : 0-639px /
.element {
  padding: 1rem;
  font-size: 0.875rem;
}

/ Small (sm) : 640px+ /
@media (min-width: 640px) {
  .element {
    padding: 1.25rem;
    font-size: 1rem;
  }
}

/ Medium (md) : 768px+ /
@media (min-width: 768px) {
  .element {
    padding: 1.5rem;
    font-size: 1rem;
  }
}

/ Large (lg) : 1024px+ /
@media (min-width: 1024px) {
  .element {
    padding: 2rem;
    font-size: 1.125rem;
  }
}

/ Extra Large (xl) : 1280px+ /
@media (min-width: 1280px) {
  .element {
    padding: 2.5rem;
    font-size: 1.125rem;
  }
}

/ 2XL : 1536px+ /
@media (min-width: 1536px) {
  .element {
    padding: 3rem;
    font-size: 1.25rem;
  }
}

Breakpoints par catégorie d’appareil
/ APPROCHE PAR APPAREIL (moins flexible, mais parfois utile) /

/ Smartphones portrait : 320px - 479px /
@media (min-width: 320px) and (max-width: 479px) {
  .mobile-only {
    display: block;
  }
}

/ Smartphones paysage : 480px - 767px /
@media (min-width: 480px) and (max-width: 767px) {
  .mobile-landscape {
    display: flex;
  }
}

/ Tablettes portrait : 768px - 1023px /
@media (min-width: 768px) and (max-width: 1023px) {
  .tablet-portrait {
    grid-template-columns: repeat(2, 1fr);
  }
}

/ Tablettes paysage et petits desktops : 1024px - 1279px /
@media (min-width: 1024px) and (max-width: 1279px) {
  .tablet-landscape {
    grid-template-columns: repeat(3, 1fr);
  }
}

/ Desktop standard : 1280px+ /
@media (min-width: 1280px) {
  .desktop {
    grid-template-columns: repeat(4, 1fr);
  }
}

Breakpoints personnalisés
Adaptez selon votre contenu, pas seulement selon les appareils.
/ Breakpoint basé sur le contenu /
.text-content {
  max-width: 100%;
  padding: 1rem;
}

/ À 600px, le texte devient trop large pour être confortable /
@media (min-width: 600px) {
  .text-content {
    max-width: 65ch;  / 65 caractères max /
    margin: 0 auto;
  }
}

/ À 900px, on peut ajouter une sidebar /
@media (min-width: 900px) {
  .layout-with-sidebar {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
  }
}

Techniques responsive essentielles
1. Navigation responsive

  

    MonSite

    
    
      
    

    
    
  


/ Mobile first : Menu empilé /
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  text-decoration: none;
}

/ Menu hamburger visible sur mobile /
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger {
  width: 24px;
  height: 2px;
  background: #1f2937;
  position: relative;
  transition: background 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: #1f2937;
  transition: transform 0.3s ease;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  bottom: -8px;
}

/ Animation hamburger en X /
.menu-toggle[aria-expanded="true"] .hamburger {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg);
  bottom: 0;
}

/ Navigation mobile : verticale et cachée par défaut /
.main-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.main-nav.is-open {
  max-height: 400px;
}

.nav-list {
  list-style: none;
  padding: 1rem;
  margin: 0;
}

.nav-list li {
  margin: 0;
}

.nav-list a {
  display: block;
  padding: 0.75rem 1rem;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s ease;
}

.nav-list a:hover {
  background: #f3f4f6;
  color: #2563eb;
}

/ Tablette et desktop : Navigation horizontale /
@media (min-width: 768px) {
  .menu-toggle {
    display: none;  / Cache le hamburger /
  }

  .main-nav {
    position: static;
    max-height: none;
    overflow: visible;
    border: none;
  }

  .nav-list {
    display: flex;
    gap: 0.5rem;
    padding: 0;
  }

  .nav-list a {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
  }
}

// JavaScript pour le menu mobile
const menuToggle = document.querySelector('.menu-toggle');
const mainNav = document.querySelector('.main-nav');

menuToggle.addEventListener('click', () => {
  const isOpen = menuToggle.getAttribute('aria-expanded') === 'true';
  menuToggle.setAttribute('aria-expanded', !isOpen);
  mainNav.classList.toggle('is-open');
});

2. Grilles responsive
/ Grille CSS moderne avec auto-fit /
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

/ Les cartes s'adaptent automatiquement :
   - Mobile : 1 colonne (si largeur < 280px + gap)
   - Tablette : 2-3 colonnes
   - Desktop : 3-4 colonnes
   Sans media query ! /

/ Contrôle plus précis avec media queries /
.custom-grid {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

/ Mobile : 1 colonne /
.custom-grid {
  grid-template-columns: 1fr;
}

/ Tablette : 2 colonnes /
@media (min-width: 640px) {
  .custom-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/ Desktop : 3 colonnes /
@media (min-width: 1024px) {
  .custom-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 2rem;
  }
}

/ Large desktop : 4 colonnes /
@media (min-width: 1280px) {
  .custom-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

3. Typographie responsive
/ Approche avec clamp() (moderne et recommandée) /
:root {
  / Typographie fluide entre min et max /
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --font-size-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --font-size-4xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
}

body {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

h1 {
  font-size: var(--font-size-4xl);
  line-height: 1.1;
}

h2 {
  font-size: var(--font-size-3xl);
  line-height: 1.2;
}

h3 {
  font-size: var(--font-size-2xl);
  line-height: 1.3;
}

/ Approche traditionnelle avec media queries /
.traditional-heading {
  font-size: 2rem;  / Mobile : 32px /
  line-height: 1.2;
}

@media (min-width: 768px) {
  .traditional-heading {
    font-size: 2.5rem;  / Tablette : 40px /
  }
}

@media (min-width: 1024px) {
  .traditional-heading {
    font-size: 3.5rem;  / Desktop : 56px /
  }
}

@media (min-width: 1280px) {
  .traditional-heading {
    font-size: 4rem;  / Large desktop : 64px /
  }
}

4. Espacement responsive
/ Système d'espacement adaptatif /
:root {
  / Mobile /
  --space-xs: 0.5rem;   / 8px /
  --space-sm: 1rem;     / 16px /
  --space-md: 1.5rem;   / 24px /
  --space-lg: 2rem;     / 32px /
  --space-xl: 3rem;     / 48px /
  --space-2xl: 4rem;    / 64px /
}

@media (min-width: 768px) {
  :root {
    / Tablette : espacements légèrement augmentés /
    --space-md: 2rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
  }
}

@media (min-width: 1024px) {
  :root {
    / Desktop : espacements généreux /
    --space-md: 2.5rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-2xl: 8rem;
  }
}

/ Utilisation /
.section {
  padding: var(--space-lg) var(--space-sm);
}

.card {
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

5. Masquer/Afficher selon l’écran
/ Classes utilitaires pour masquer/afficher /

/ Masquer sur mobile, afficher sur desktop /
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

/ Afficher sur mobile, masquer sur desktop /
.show-mobile {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none;
  }
}

/ Masquer sur tablette uniquement /
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet {
    display: none;
  }
}

/ Exemple d'utilisation /


  
  
    📞 Appelez-nous
  

  
  

    Téléphone : 01 23 45 67 89
  


Mise en pratique : Page responsive complète
Créons une landing page responsive de A à Z.



  
  
  
  


  
  

    

      

        DesignPro

        
          
        

        
      
    
  

  
  

    

      

        

          

            Créez des designs inoubliables
          
          

            Transformez vos idées en interfaces web modernes, responsive et accessibles.
            Des designs qui convertissent et enchantent vos utilisateurs.
          
          

            Démo gratuite
            En savoir plus
          

          
          

            

              500+
              Clients satisfaits
            
            

              98%
              Taux de satisfaction
            
            

              24/7
              Support disponible
            
          
        

        

          
            
            
            
          
        
      
    
  

  
  

    

      
Nos services
      

        Des solutions complètes pour tous vos besoins en design web
      

      

        

          
🎨
          
Design UI/UX
          

            Interfaces intuitives centrées sur l'expérience utilisateur.
          
        

        

          
📱
          
Responsive Design
          

            Sites parfaitement adaptés à tous les appareils.
          
        

        

          
⚡
          
Performance
          

            Optimisation pour des temps de chargement ultra-rapides.
          
        

        

          
♿
          
Accessibilité
          

            Conformité WCAG pour une expérience inclusive.
          
        
      
    
  

  
  

    

      

        
Prêt à transformer votre présence en ligne ?
        

          Rejoignez plus de 500 clients satisfaits et démarquez-vous de la concurrence.
        
        Démarrer maintenant
      
    
  

  
  

  



/ styles.css - Mobile First Responsive /

/ Reset et configuration de base /
 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  / Couleurs /
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-text: #1f2937;
  --color-text-light: #6b7280;
  --color-bg: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-border: #e5e7eb;

  / Espacements (mobile) /
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  / Typographie fluide /
  --font-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
  --font-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --font-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --font-3xl: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

/ HEADER - Navigation responsive /
.header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

/ Menu hamburger (mobile) /
.menu-toggle {
  display: flex;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 101;
}

.hamburger {
  width: 24px;
  height: 2px;
  background: var(--color-text);
  position: relative;
  transition: background 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.3s ease;
}

.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

.menu-toggle[aria-expanded="true"] .hamburger {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg);
  bottom: 0;
}

/ Navigation mobile /
.nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 300px;
  height: 100vh;
  background: var(--color-bg);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  padding: 5rem 2rem 2rem;
  overflow-y: auto;
}

.nav.is-open {
  right: 0;
}

.nav-list {
  list-style: none;
}

.nav-list li {
  margin-bottom: var(--space-sm);
}

.nav-list a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: background 0.2s ease;
}

.nav-list a:hover {
  background: var(--color-bg-secondary);
  color: var(--color-primary);
}

.nav-cta {
  background: var(--color-primary);
  color: #ffffff !important;
  margin-top: var(--space-md);
}

.nav-cta:hover {
  background: var(--color-primary-dark) !important;
}

/ HERO SECTION /
.hero {
  padding: var(--space-xl) 0;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.hero-grid {
  display: grid;
  gap: var(--space-lg);
}

.hero-title {
  font-size: var(--font-3xl);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

.highlight {
  background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--font-lg);
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.75rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  text-align: center;
}

.button-primary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.button-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.button-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.button-secondary:hover {
  background: var(--color-primary);
  color: #ffffff;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.stat {
  text-align: center;
}

.stat strong {
  display: block;
  font-size: var(--font-2xl);
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.stat span {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.hero-image {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/ FEATURES SECTION /
.features {
  padding: var(--space-2xl) 0;
}

.section-title {
  font-size: var(--font-2xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-sm);
}

.section-subtitle {
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.features-grid {
  display: grid;
  gap: var(--space-md);
}

.feature-card {
  background: var(--color-bg);
  padding: var(--space-lg);
  border-radius: 0.75rem;
  border: 1px solid var(--color-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-sm);
}

.feature-title {
  font-size: var(--font-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.feature-description {
  color: var(--color-text-light);
  line-height: 1.6;
}

/ CTA SECTION /
.cta {
  padding: var(--space-2xl) 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%);
  color: #ffffff;
}

.cta-content {
  text-align: center;
}

.cta-title {
  font-size: var(--font-2xl);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.cta-subtitle {
  font-size: var(--font-lg);
  opacity: 0.9;
  margin-bottom: var(--space-lg);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.button-large {
  padding: 1.25rem 2.5rem;
  font-size: var(--font-lg);
  background: #ffffff;
  color: var(--color-primary);
}

.button-large:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/ FOOTER /
.footer {
  background: var(--color-text);
  color: #ffffff;
  padding: var(--space-xl) 0 var(--space-md);
}

.footer-grid {
  display: grid;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer-col h4 {
  margin-bottom: var(--space-sm);
  font-size: var(--font-lg);
}

.footer-col p {
  color: #9ca3af;
  line-height: 1.6;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 0.5rem;
}

.footer-col a {
  color: #d1d5db;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: #ffffff;
}

.footer-bottom {
  padding-top: var(--space-md);
  border-top: 1px solid #374151;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

/ Masquer éléments sur mobile /
.hide-mobile {
  display: none;
}

/ TABLETTE : 768px+ /
@media (min-width: 768px) {
  :root {
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
  }

  .container {
    padding: 0 var(--space-md);
  }

  / Menu horizontal /
  .menu-toggle {
    display: none;
  }

  .nav {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    background: none;
    box-shadow: none;
    padding: 0;
    overflow: visible;
  }

  .nav-list {
    display: flex;
    gap: 0.5rem;
  }

  .nav-list li {
    margin-bottom: 0;
  }

  .nav-cta {
    margin-top: 0;
  }

  / Hero en 2 colonnes /
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-xl);
  }

  .hero-actions {
    flex-direction: row;
  }

  .hide-mobile {
    display: block;
  }

  / Features en 2 colonnes /
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  / Footer en 3 colonnes /
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/ DESKTOP : 1024px+ /
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.2fr 1fr;
  }

  / Features en 4 colonnes /
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/ LARGE DESKTOP : 1280px+ /
@media (min-width: 1280px) {
  :root {
    --space-xl: 5rem;
    --space-2xl: 8rem;
  }
}

/ Préférence mouvement réduit (accessibilité) /
@media (prefers-reduced-motion: reduce) {
  ,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// script.js - Menu mobile
const menuToggle = document.querySelector('.menu-toggle');
const nav = document.querySelector('.nav');
const body = document.body;

menuToggle.addEventListener('click', () => {
  const isOpen = menuToggle.getAttribute('aria-expanded') === 'true';

  menuToggle.setAttribute('aria-expanded', !isOpen);
  nav.classList.toggle('is-open');

  // Empêcher le scroll quand le menu est ouvert
  body.style.overflow = isOpen ? '' : 'hidden';
});

// Fermer le menu en cliquant sur un lien
const navLinks = document.querySelectorAll('.nav-list a');
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    menuToggle.setAttribute('aria-expanded', 'false');
    nav.classList.remove('is-open');
    body.style.overflow = '';
  });
});

// Fermer le menu avec Escape
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && nav.classList.contains('is-open')) {
    menuToggle.setAttribute('aria-expanded', 'false');
    nav.classList.remove('is-open');
    body.style.overflow = '';
  }
});

Tests et debugging responsive
Outils de développement
/ Helper pour visualiser les breakpoints en développement /
body::before {
  content: 'Mobile: < 640px';
  position: fixed;
  bottom: 0;
  right: 0;
  background: #ef4444;
  color: #ffffff;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 9999;
  border-top-left-radius: 0.375rem;
}

@media (min-width: 640px) {
  body::before {
    content: 'Tablet: ≥ 640px';
    background: #f59e0b;
  }
}

@media (min-width: 768px) {
  body::before {
    content: 'Tablet: ≥ 768px';
    background: #10b981;
  }
}

@media (min-width: 1024px) {
  body::before {
    content: 'Desktop: ≥ 1024px';
    background: #3b82f6;
  }
}

@media (min-width: 1280px) {
  body::before {
    content: 'Large: ≥ 1280px';
    background: #8b5cf6;
  }
}

/ Retirer en production /

Checklist de tests
[ ] iPhone SE (375px) – Petit mobile
[ ] iPhone 12/13/14 (390px) – Mobile standard
[ ] iPhone 12/13/14 Pro Max (428px) – Grand mobile
[ ] iPad Mini (768px) – Petite tablette
[ ] iPad Air (820px) – Tablette standard
[ ] iPad Pro (1024px) – Grande tablette
[ ] Desktop 1280px – Standard
[ ] Desktop 1920px – Full HD
[ ] Desktop 2560px – 2K
Outils recommandés
Chrome DevTools – Device Mode (Ctrl+Shift+M)
Firefox Responsive Design Mode (Ctrl+Shift+M)
Responsively App – Tester plusieurs tailles simultanément
BrowserStack – Tests sur vrais appareils
Am I Responsive – Aperçu rapide multi-écrans
Erreurs courantes à éviter
1. Oublier la meta viewport



2. Utiliser des largeurs fixes
/ MAL /
.container {
  width: 1200px;
}

/ BIEN /
.container {
  max-width: 1200px;
  width: 100%;
  padding: 0 1rem;
}

3. Ignorer les orientations
/ Adapter le design en mode paysage mobile /
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding: 2rem 0;  / Réduire padding vertical /
  }

  .hero-title {
    font-size: 2rem;  / Réduire titre */
  }
}

4. Tester uniquement sur desktop
Testez TOUJOURS sur de vrais appareils mobiles, pas seulement en mode device.
5. Négliger la performance mobile



Conclusion
Le design responsive mobile-first est devenu la norme de l’industrie. En commençant par mobile et en ajoutant progressivement des fonctionnalités pour les écrans plus grands, vous créez des expériences optimales pour tous vos utilisateurs.
Points clés à retenir :
Toujours inclure la meta viewport
Approche mobile-first (min-width dans media queries)
Utiliser des unités relatives (rem, %, vw) plutôt que pixels fixes
Breakpoints standards : 640px, 768px, 1024px, 1280px
Tester sur de vrais appareils, pas seulement en émulation
Performance mobile critique (images optimisées, CSS minimal)
Prochaines étapes :
Créez votre premier site responsive de A à Z
Testez sur minimum 5 tailles d’écran différentes
Analysez des sites responsive que vous admirez
Maîtrisez CSS Grid et Flexbox pour des layouts flexibles
Apprenez les techniques d’optimisation d’images responsive
Le responsive design demande de la pratique, mais une fois maîtrisé, il devient une seconde nature. Chaque projet vous rendra plus efficace !

Ressources complémentaires :
Google Web Fundamentals – Responsive
Responsively App – Outil de test gratuit
Can I Use – Compatibilité navigateurs

Share this article
TwitterFacebookLinkedInRedditEmail
Related Articles
JavaScript moderne (ES6+) : Variables, fonctions fléchées, et destructuring
Introduction JavaScript a considérablement évolué depuis ES6 (ECMAScript 2015). Comprendre ces nouvelles fonctionnalités est essentiel…
Comprendre le tableau de bord WordPress : Guide complet pour débutants
Le tableau de bord WordPress est le centre de contrôle de votre site web. C'est…
Principes fondamentaux du design web : Hiérarchie visuelle et typographie
Introduction Le design web efficace repose sur deux piliers fondamentaux : la hiérarchie visuelle et…