Retour au cours

Lesson 84: Desktop-First Approach (max-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.)*

84. Desktop-First Approach (max-width)

Before Mobile-First gained traction, the Desktop-First approach was common. Here, you define styles for the largest screen first, and then use max-width media queries to scale down the layout for smaller screens.

Using max-width

Styles written outside the media query apply to all screen sizes. The max-width queries then apply styles that shrink or simplify the layout when the viewport width is below a certain size.

css /* 1. Default (Desktop Styles) / .sidebar { width: 300px; / Wide sidebar on desktop */ float: left; }

.main-content { margin-left: 320px; }

/* 2. Tablet Breakpoint (Up to 900px) / @media (max-width: 900px) { .sidebar { width: 200px; / Sidebar shrinks */ } }

/* 3. Mobile Breakpoint (Up to 600px) / @media (max-width: 600px) { .sidebar { float: none; / Remove float / width: 100%; / Take full width */ } .main-content { margin-left: 0; } }

Recommendation: While still functional, Desktop-First requires overriding more complex CSS definitions, making it generally less efficient and harder to maintain than Mobile-First.