intro-frontend-course

Lesson: Responsive Design in CSS

Introduction

Responsive design ensures your web content looks good on all devices, from desktops to tablets to smartphones. This lesson covers the basics of implementing responsive design using CSS, focusing on media queries and practical examples for various screen widths and orientations.

Key Concepts

Setting the Viewport

The viewport meta tag ensures your web page renders well on different devices.

Example:

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

Fluid Grids

Fluid grids use relative units to make your layout flexible. This approach allows your layout to adapt to different screen sizes without breaking.

Example: Basic Fluid Grid

HTML:

<div class="container">
  <div class="row">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
  </div>
</div>

CSS:

.container {
  width: 100%;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  width: 50%;
  padding: 10px;
}

Flexible Images

Flexible images resize within their containing elements, ensuring they look good on any device.

Example:

img {
  max-width: 100%;
  height: auto;
}

Media Queries

Media queries apply styles based on the device’s characteristics, such as screen width. They are essential for creating responsive designs.

Major Screen Widths and Orientations

Mobile First Approach

The mobile first approach involves designing for the smallest screen size first and then adding styles for larger screens. This ensures a better user experience on mobile devices.

Practical Implementation with Media Queries

Example: Responsive Two-Column Layout

  1. HTML Structure

HTML:

<div class="container">
  <div class="row">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
  </div>
</div>
  1. CSS for Mobile First Approach

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}

.row {
  display: flex;
  width: 100%;
}

.column {
  flex: 1;
  padding: 10px;
  width: 100%; /* Mobile first: Columns stack vertically */
}

/* Mobile (Landscape) */
@media (min-width: 481px) {
  .column {
    width: 50%; /* Two columns side by side */
  }
}

/* Tablet (Portrait) */
@media (min-width: 768px) {
  .column {
    width: 50%; /* Two columns side by side */
  }
}

/* Tablet (Landscape) */
@media (min-width: 1025px) {
  .column {
    width: 50%; /* Two columns side by side */
  }
}

/* Desktop */
@media (min-width: 1201px) {
  .column {
    width: 50%; /* Two columns side by side */
  }
}

Specific Device Examples

  1. iPhone (Portrait, max-width: 480px)

CSS:

@media (max-width: 480px) {
  .column {
    width: 100%; /* Columns stack vertically */
  }
}
  1. Android (Landscape, min-width: 481px and max-width: 767px)

CSS:

@media (min-width: 481px) and (max-width: 767px) {
  .column {
    width: 50%; /* Two columns side by side */
  }
}
  1. Tablet (Portrait, min-width: 768px and max-width: 1024px)

CSS:

@media (min-width: 768px) and (max-width: 1024px) {
  .column {
    width: 50%; /* Two columns side by side */
  }
}
  1. Desktop (min-width: 1201px)

CSS:

@media (min-width: 1201px) {
  .column {
    width: 50%; /* Two columns side by side */
  }
}

Using min-width and max-width

Example Using min-width and max-width

/* Mobile first: styles for all devices */
.column {
  width: 100%;
}

/* Styles for devices wider than 768px (Tablet and up) */
@media (min-width: 768px) {
  .column {
    width: 50%;
  }
}

/* Styles for devices narrower than 480px (Mobile Portrait) */
@media (max-width: 480px) {
  .column {
    width: 100%;
  }
}

Practical Example: Responsive Web Page

Step-by-Step Instructions:

  1. HTML Structure

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Design Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>My Responsive Website</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <main>
    <section class="hero">
      <h2>Welcome to Our Website</h2>
      <p>We provide the best services to our clients.</p>
    </section>
    <section class="features">
      <div class="feature">
        <h3>Feature 1</h3>
        <p>Details about feature 1.</p>
      </div>
      <div class="feature">
        <h3>Feature 2</h3>
        <p>Details about feature 2.</p>
      </div>
      <div class="feature">
        <h3>Feature 3</h3>
        <p>Details about feature 3.</p>
      </div>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 My Responsive Website</p>
  </footer>
</body>
</html>
  1. CSS Styles

CSS:

/* Global Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header, nav, main, footer {
  padding: 20px;
}

header {
  background-color: #333;
  color: #fff;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}

.hero {
  background-color: #f4f4f4;
  padding: 50px;
  text-align: center;
}

.features {
  display: flex;
  flex-wrap: wrap;
}

.feature {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
}

/* Mobile First: Default Styles */
.feature {
  width: 100%;
}

/* Tablet: Portrait */
@media (min-width: 768px) {
  .feature {
    width: 50%;
  }
}

/* Tablet: Landscape */
@media (min-width: 1025px) {
  .feature {
    width: 33.33%;
  }
}

/* Desktop */
@media (min-width: 1201px) {
  .feature {
    width: 33.33%;
  }
}

Common Pitfalls and Tips

Summary and Recap

Exercise

  1. Create a responsive webpage with a header, navigation, main content area, and footer using media queries.
  2. Use fluid grids to create a layout that adapts to different screen sizes.
  3. Ensure images are flexible and resize within their containers.

Quizzes

Additional Resources