Day 2 - Responsive Design

---

1. Viewport Units (vw, vh)

vw (viewport width) is relative to the browser window size.
% (percentage) is relative to the parent element size.

Code:

Output:

---

2. Media Queries (@media)

Style changes based on conditions like screen width. This is the core of responsive design.

Code:

Output:

---

3. Responsive Layouts

Using Grid or Flexbox with media queries to change column counts.

Code:

Output:

---

4. Showing/Hiding Content

Sometimes you want to show different content on mobile vs desktop.

Code:

Output:

---

5. Font Clamping (clamp())

Essence: clamp() is a CSS function that constrains a value between an upper and lower bound. For typography, it allows text to scale fluidly with the viewport while ensuring it never gets too small or too big.

Usage: font-size: clamp(min, preferred, max);
The browser will use the preferred value as long as it is between the min and max.

Calculations:

Example: font-size: clamp(16px, 5vw, 48px);
- Minimum: 16px. The font will never be smaller than this.
- Preferred: 5vw (5% of viewport width). This allows the font to grow/shrink.
- Maximum: 48px. The font will never be larger than this.
You don't need complex math; let the browser calculate based on the viewport width!

Tools:

There are many online "Clamp Calculators" that can help you generate the perfect clamp() formula based on your desired minimum and maximum pixel sizes and viewport widths.

Reference: Clamp Calculator (https://clamp.font-size.app/)

Code:

Output: