Retour au cours

Lesson 81: Introduction to Responsive Web Design (RWD)

**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.)*

81. Introduction to Responsive Web Design (RWD)

Responsive Web Design is the practice of building a website that adapts its layout, appearance, and functionality to various screen sizes, orientations, and resolutions (from phones to large desktops).

Core Principles of RWD

  1. Fluid Grids: Using relative units (%, fr, vw) rather than fixed pixels for primary layout dimensions.
  2. Flexible Images: Ensuring media scales within containers.
  3. Media Queries: The primary tool used to apply specific CSS rules only when certain conditions (like screen width) are met.

The Viewport Meta Tag (Crucial Setup)

For a responsive site to work correctly on mobile devices, you must include the viewport meta tag in the HTML <head>.

Without this tag, mobile browsers assume a large desktop width (e.g., 980px) and scale the whole page down, which is the opposite of responsive design.

html

<head> <!-- This tells the browser to use the device's actual width and set the initial zoom level to 1.0 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

Rule: Always start a new responsive project by adding this meta tag.