Responsiveness and RWD - Adapting Your Page to Every Screen

Welcome back to Ancient Egypt! Just as Egyptian architects designed structures that had to endure for millennia and serve various purposes, we must create websites that look great on every device - from a small smartphone to a large monitor.

RWD (Responsive Web Design) is an approach where a page automatically adjusts its appearance to the user's screen size. Instead of creating separate pages for phones and computers, we create one page that flexibly adapts.

Viewport Meta Tag - The Foundation of Responsiveness

Before we start writing responsive styles, we need to tell the mobile browser that our page is prepared for different screens. We do this with a special <meta> tag in the <head> section:

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without this tag, the mobile browser will display the page as if it were designed for desktop (width ~980px) and then scale it down. With this tag, the browser knows to use the actual screen width of the device.

Media Queries - Different Styles for Different Screens

Media queries are CSS rules that allow you to apply different styles depending on device properties, most commonly screen width. We use the @media directive:

1/* Base styles - for all screens */
2.container {
3  width: 100%;
4  padding: 10px;
5}
6
7/* Styles for tablets (768px and above) */
8@media (min-width: 768px) {
9  .container {
10    width: 750px;
11    margin: 0 auto;
12    padding: 20px;
13  }
14}
15
16/* Styles for desktops (1024px and above) */
17@media (min-width: 1024px) {
18  .container {
19    width: 960px;
20    padding: 30px;
21  }
22}
23
24/* Styles for large screens (1200px and above) */
25@media (min-width: 1200px) {
26  .container {
27    width: 1140px;
28  }
29}

Notice the min-width - this means the styles will apply from the given width upward. This is the mobile-first approach.

Mobile-First vs Desktop-First

There are two main approaches to writing responsive styles:

Mobile-first (recommended) - we start with styles for the smallest screens and add styles for progressively larger ones using min-width:

1/* Base styles = mobile */
2.cards {
3  display: flex;
4  flex-direction: column;
5  gap: 10px;
6}
7
8/* Tablet */
9@media (min-width: 768px) {
10  .cards {
11    flex-direction: row;
12    flex-wrap: wrap;
13  }
14  .cards .card {
15    width: 48%;
16  }
17}
18
19/* Desktop */
20@media (min-width: 1024px) {
21  .cards .card {
22    width: 31%;
23  }
24}

Desktop-first - we start with large screens and scale down using max-width:

1/* Base styles = desktop */
2.cards .card {
3  width: 31%;
4}
5
6@media (max-width: 1023px) {
7  .cards .card {
8    width: 48%;
9  }
10}
11
12@media (max-width: 767px) {
13  .cards {
14    flex-direction: column;
15  }
16  .cards .card {
17    width: 100%;
18  }
19}

Mobile-first is recommended because we first handle the most constrained devices and then add features for larger screens.

Common Breakpoints

Breakpoints are threshold values where the page layout changes. Here are the most commonly used ones:

Responsive Units

In RWD, instead of fixed pixels, it's worth using relative units:

• % - percentage relative to the parent element
• vw / vh - percentage of the browser window width / height (viewport)
• rem - relative to the root element's font size (<html>)
• em - relative to the parent element's font size

1/* Fixed - NOT responsive */
2.box { width: 400px; font-size: 16px; }
3
4/* Responsive - adapts to the screen */
5.box {
6  width: 90%;          /* 90% of parent width */
7  max-width: 600px;    /* but no more than 600px */
8  font-size: 1rem;     /* relative to root font-size */
9  padding: 2vw;        /* 2% of viewport width */
10  min-height: 50vh;    /* minimum 50% of screen height */
11}

Flexbox and flex-wrap in Responsiveness

The flex-wrap: wrap property causes flexbox elements to automatically wrap to a new line when there isn't enough space. It's one of the simplest ways to create a responsive layout:

1.gallery {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 16px;
5}
6
7.gallery-item {
8  flex: 1 1 250px;
9  /* flex-grow: 1 - element grows */
10  /* flex-shrink: 1 - element shrinks */
11  /* flex-basis: 250px - minimum width */
12}

Thanks to flex: 1 1 250px, each element has a minimum width of 250px. When the screen is too narrow, elements automatically jump to the next row - without the need to write media queries!

Responsive Navigation

Navigation is the element that most commonly changes between mobile and desktop:

1.nav {
2  display: flex;
3  flex-direction: column;
4}
5
6.nav-links {
7  display: none; /* Hidden on mobile */
8}
9
10.nav-toggle {
11  display: block; /* Hamburger menu on mobile */
12}
13
14@media (min-width: 768px) {
15  .nav {
16    flex-direction: row;
17    justify-content: space-between;
18    align-items: center;
19  }
20
21  .nav-links {
22    display: flex;
23    gap: 20px;
24  }
25
26  .nav-toggle {
27    display: none; /* Hide hamburger on desktop */
28  }
29}

Summary of Key RWD Elements

1. Viewport meta tag - informs the browser about responsiveness
2. Fluid grid - flexible grid based on percentages
3. Flexible images - images with max-width: 100%
4. Media queries - different styles for different screen sizes

These four pillars of RWD are like the four walls of an Egyptian pyramid - each one is essential to ensure the construction is stable and endures across all devices.

Practical Application

Practice responsiveness in the editor below. Try resizing the preview window to see how the layout adapts:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>RWD - Responsive Page</title>
7  <link rel="stylesheet" href="/styles.css">
8</head>
9<body>
10  <nav class="nav">
11    <div class="nav-logo">Pyramid RWD</div>
12    <ul class="nav-links">
13      <li><a href="#">Start</a></li>
14      <li><a href="#">About us</a></li>
15      <li><a href="#">Gallery</a></li>
16      <li><a href="#">Contact</a></li>
17    </ul>
18  </nav>
19
20  <header class="hero">
21    <h1>Responsive Page</h1>
22    <p>Resize the preview window to see how the layout adapts!</p>
23  </header>
24
25  <main class="cards">
26    <div class="card">
27      <h2>Card 1</h2>
28      <p>This card adapts to the screen thanks to flex-wrap and media queries.</p>
29    </div>
30    <div class="card">
31      <h2>Card 2</h2>
32      <p>On small screens, cards stack one below another.</p>
33    </div>
34    <div class="card">
35      <h2>Card 3</h2>
36      <p>On large screens, cards sit side by side in one row.</p>
37    </div>
38  </main>
39
40  <footer class="footer">
41    <p>&copy; 2024 Pyramid RWD</p>
42  </footer>
43</body>
44</html>