Retour au cours

Lesson 83: Mobile-First Approach (min-width)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

83. Mobile-First Approach (min-width)

The Mobile-First strategy is the modern standard for RWD. It means designing and styling for the smallest screen (mobile) first, and then adding styles for larger screens only when necessary.

Why Mobile-First?

  1. Performance: Mobile devices require less complex initial CSS, leading to faster load times.
  2. Progressive Enhancement: You start with the minimum viable layout and progressively enhance it for wider viewports.

Using min-width

In a Mobile-First approach, you use min-width to define breakpoints. Styles written outside the media query apply to all screens, and the min-width queries override those styles as the screen gets larger.

css /* 1. Default (Mobile Styles) / .container { width: 90%; padding: 10px; flex-direction: column; / Items stack vertically on mobile */ }

/* 2. Tablet Breakpoint (600px and up) / @media (min-width: 600px) { .container { padding: 20px; flex-direction: row; / Layout changes to horizontal */ } }

/* 3. Desktop Breakpoint (1024px and up) */ @media (min-width: 1024px) { .container { max-width: 1200px; margin: 0 auto; } }

Note: Styles in the largest query always override preceding queries if they conflict.