Responsive Design
---
theme: seriph
title: Responsive Design
info: "Module F-CSS-003: viewport meta, mobile-first media queries, fluid layouts"
---
# Responsive Design
---
# What Is Responsive Design?
Websites that **adapt** to different screen sizes:
- Desktop monitors
- Laptops
- Tablets
- Mobile phones
> One website, many devices.
---
# The Viewport Meta Tag
**Essential** for responsive design:
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Without this, mobile browsers assume your site is desktop-only!
Open your `index.html`. Is this in your `<head>`?
> AI tip: AI generates desktop-width layouts by default. Always test your page on mobile using DevTools.
---
# Mobile-First Approach
1. Design for **mobile** first (smallest screen)
2. Add complexity for **larger** screens
3. Results in faster mobile sites
4. Forces you to prioritize content
```css
/* Base styles (mobile) */
.container { width: 100%; }
/* Tablet and up */
@media (min-width: 768px) {
.container { width: 750px; }
}
```
---
# Media Query Syntax
```css
@media (condition) {
/* Styles that apply when condition is true */
}
```
**Common conditions:**
```css
@media (min-width: 768px) { } /* 768px and wider */
@media (max-width: 767px) { } /* 767px and narrower */
```
Mobile-first = use `min-width` (start small, add up).
> AI tip: When you ask AI for responsive CSS, specify "mobile-first with min-width media queries." Otherwise it may generate desktop-first code.
---
# Common Breakpoints
| Device | Width |
|--------|-------|
| Mobile | < 576px |
| Tablet | 576px - 768px |
| Desktop | 768px - 1024px |
| Large Desktop | > 1024px |
> These are guidelines, not rules. Test on real devices!
---
# Media Query Example
```css
/* Mobile first (default): single column */
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
/* Tablet: 2 columns */
@media (min-width: 576px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: 3 columns */
@media (min-width: 992px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
```
---
# Fluid Layouts + Responsive Images
Use **percentages** and **max-width** to stay flexible:
```css
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
```
Make images behave:
```css
img {
max-width: 100%; /* never wider than container */
height: auto; /* maintain aspect ratio */
}
```
---
# Testing in DevTools
1. Open DevTools (**F12**)
2. Click the **device icon** (or Ctrl+Shift+M)
3. Select a device or enter a custom size
**Check:**
- Does content fit without horizontal scroll?
- Are fonts readable without zooming?
- Are tap targets at least 48px?
---
# Your Turn
Take your existing site and make it responsive:
1. Add the viewport meta tag if missing
2. Use mobile-first media queries to adjust layout
3. Make images fluid with `max-width: 100%`
4. Test in DevTools device mode at different sizes
---
# References
- [MDN: Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)
- [Chrome DevTools Device Mode](https://developer.chrome.com/docs/devtools/device-mode/)
Topics Covered
- viewport meta
- mobile-first media queries
- fluid layouts
- responsive images
Content Slides Open fullscreen ↗
Taught In
- Monday, 6/8 — Responsive design · Forms