Today's Learning Objectives

• 🎯 Understand responsive design principles
• 🎯 Implement natural responsiveness techniques
• 🎯 Work with responsive images
• 🎯 Use media queries effectively
• 🎯 Choose appropriate breakpoints
• 🎯 Build mobile-first layouts

Norse Mythology Connection

Skíðblaðnir - The Folding Ship

The Ship's Adaptive Magic

/* Skíðblaðnir folded (mobile) */
.container {
    width: 100%;
    flex-direction: column;
}

/* Skíðblaðnir expanded (desktop) */
@media (min-width: 768px) {
    .container {
        max-width: 1200px;
        flex-direction: row;
    }
}

Note on Web Accessibility

What is Responsive Design?

Creating websites that respond to changes in browser size to work on any device

Why Responsive Design?

Screen Size Support

Natural Responsiveness

HTML is Responsive by Default

The Viewport Meta Tag

Essential for every project:

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

Avoid Fixed Width

The #1 Enemy of Flexibility

.container {
  width: 600px;
}

.container {
  max-width: 600px;
}

Avoid Fixed Height

.box {
  height: 300px;
}

.box {
  min-height: 300px;
}

When Fixed Widths Are OK

Use Flex and Grid

These were designed for responsive layouts!

/* Responsive with flex-wrap */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 300px; /* Grow, shrink, basis */
}

/* Responsive with grid auto-fill */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

Responsive Images

The Aspect Ratio Problem

img {
  width: 200px;
  height: 400px;
}

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

background-size & background-position

For background images (not <img> tags)

.hero {
  background-image: url('hero.jpg');
  background-size: cover;      /* Fill container */
  background-position: center; /* Keep centered */
  height: 400px;
}

/* Other options */
background-size: contain;  /* Fit inside, might not fill */
background-size: 100% 100%; /* Stretch (usually bad) */

object-fit Property

For <img> tags (works like background-size)

img {
  width: 300px;
  height: 200px;
  object-fit: cover;  /* Fill dimensions, maintain aspect */
  object-position: center; /* Center the image */
}

/* Other object-fit values */
object-fit: fill;      /* Default - stretches */
object-fit: contain;   /* Fit inside, letterbox */
object-fit: cover;     /* Fill, crop if needed */
object-fit: none;      /* Use original size */
object-fit: scale-down; /* Smaller of none or contain */

The <picture> Element

Serve different images for different screen sizes

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description">
</picture>

srcset Attribute

Let the browser choose the best image

<img
  src="small.jpg"
  srcset="small.jpg 500w,
          medium.jpg 1000w,
          large.jpg 2000w"
  sizes="(max-width: 600px) 500px,
         (max-width: 1200px) 1000px,
         2000px"
  alt="Responsive image"
>

Media Queries

Conditional Styles Based on Screen Size

body {
  margin: 24px;
}

@media (max-width: 600px) {
  body {
    margin: 8px;
  }
}

Media Query Syntax

/* Max-width: applies UP TO this size */
@media (max-width: 768px) {
  /* Mobile styles */
}

/* Min-width: applies FROM this size and up */
@media (min-width: 768px) {
  /* Desktop styles */
}

/* Combining conditions */
@media (min-width: 600px) and (max-width: 1200px) {
  /* Tablet styles */
}

/* Multiple queries */
.nav {
  display: flex;
}

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
}

max-width vs min-width

@media (max-width: 600px) {
  /* Applies when
     screen is
     600px or less */
}

@media (min-width: 600px) {
  /* Applies when
     screen is
     600px or more */
}

Common Breakpoints

Limit Your Media Queries

Mobile-First Approach

/* Base styles for mobile */
.container {
  width: 100%;
  padding: 10px;
}

.sidebar {
  display: none; /* Hidden on mobile */
}

/* Progressive enhancement for larger screens */
@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  .sidebar {
    display: block; /* Show on desktop */
  }
}

Practical Media Query Example

/* Navigation: column on mobile, row on desktop */
.nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    gap: 30px;
  }
}

/* Grid: 1 column mobile, 2 tablet, 3 desktop */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Zooming in Browsers

Print Styles

Media queries aren't just for screen sizes!

/* Screen styles (default) */
@media screen {
  .nav { display: flex; }
}

/* Print styles */
@media print {
  /* Hide non-essential elements */
  .nav,
  .sidebar,
  button {
    display: none;
  }

  /* Optimize for print */
  body {
    color: black;
    background: white;
  }

  a::after {
    content: " (" attr(href) ")"; /* Show URLs */
  }
}

Container Queries

Style based on container size, not viewport size

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card h2 {
  font-size: 1.2em;
}

/* When container is 400px+, not viewport! */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  .card h2 {
    font-size: 2em;
  }
}

Container vs Media Queries

Responsive Design Checklist

Testing Your Responsive Design

Project: Responsive Homepage

Your Final HTML/CSS Project!

Project Steps

Assignment Reading

Knowledge Check

Today's Key Takeaways

Next Class

React - Environment Setup & Introduction