🎯 Learning Objectives
After completing this course, you will be able to:
- Understand mobile-first design principles
- Use media queries effectively
- Create fluid layouts that adapt to any screen size
- Implement responsive images and typography
- Use viewport units and CSS functions
- Test responsive designs across devices
- Optimize for touch interfaces
⚡ Prerequisites
- HTML & CSS Course completed
- Understanding of Flexbox and Grid
- Basic CSS knowledge
- Multiple devices for testing (optional)
1. Viewport Configuration
The Viewport Meta Tag
This is the most important tag for responsive design:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What it does:
width=device-width - Sets width to device's screen widthinitial-scale=1.0 - Sets initial zoom level to 100%
⚠️ Common Viewport Mistakes
- ❌
user-scalable=no - Prevents zooming (bad for accessibility)
- ❌
maximum-scale=1.0 - Limits zoom (bad for accessibility)
- ✅ Always allow users to zoom for accessibility
2. Mobile-First Approach
Why Mobile-First?
- Most users browse on mobile devices
- Forces focus on essential content
- Better performance on mobile
- Easier to scale up than down
- Progressive enhancement
Mobile-First Workflow
- Design for smallest screen first
- Add complexity for larger screens
- Use
min-width media queries
- Test on real devices
Mobile-First CSS Example
/* Base styles for mobile (no media query needed) */
.container {
width: 100%;
padding: 15px;
}
.card {
margin-bottom: 20px;
}
/* Tablet and up (min-width: 768px) */
@media screen and (min-width: 768px) {
.container {
max-width: 750px;
margin: 0 auto;
padding: 20px;
}
.card {
display: inline-block;
width: 48%;
margin-right: 2%;
}
}
/* Desktop and up (min-width: 1024px) */
@media screen and (min-width: 1024px) {
.container {
max-width: 1000px;
}
.card {
width: 31%;
}
}
Media Query Syntax
/* Basic syntax */
@media media-type and (condition) {
/* CSS rules */
}
/* Common examples */
@media screen and (min-width: 768px) {
/* Styles for screens 768px and wider */
}
@media screen and (max-width: 767px) {
/* Styles for screens up to 767px */
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* Styles for screens between 768px and 1023px */
}
/* Orientation */
@media screen and (orientation: landscape) {
/* Landscape mode styles */
}
@media screen and (orientation: portrait) {
/* Portrait mode styles */
}
/* Print styles */
@media print {
.no-print {
display: none;
}
}
Common Breakpoints
- Mobile: 320px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px - 1199px
- Large Desktop: 1200px+
Device-Specific Queries
/* iPhone */
@media screen
and (min-width: 375px)
and (max-width: 812px) {
/* iPhone styles */
}
/* iPad */
@media screen
and (min-width: 768px)
and (max-width: 1024px) {
/* iPad styles */
}
4. Fluid Layouts
Percentage-Based Layouts
/* Fluid container */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* Fluid columns */
.column {
float: left;
width: 100%;
padding: 15px;
}
@media screen and (min-width: 768px) {
.column {
width: 50%;
}
}
@media screen and (min-width: 1024px) {
.column {
width: 33.333%;
}
}
Modern Responsive Grid
/* Auto-responsive grid - no media queries needed! */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
/* Flexbox responsive layout */
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.flex-item {
flex: 1 1 300px; /* grow shrink basis */
min-width: 0; /* Prevent overflow */
}
Resize your browser to see the responsive grid in action!
5. Responsive Images
Basic Responsive Images
/* Make all images responsive */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Responsive background images */
.hero {
background-image: url('hero-mobile.jpg');
background-size: cover;
background-position: center;
height: 300px;
}
@media screen and (min-width: 768px) {
.hero {
background-image: url('hero-tablet.jpg');
height: 400px;
}
}
@media screen and (min-width: 1024px) {
.hero {
background-image: url('hero-desktop.jpg');
height: 500px;
}
}
Picture Element for Art Direction
<picture>
<!-- Desktop image -->
<source media="(min-width: 1024px)" srcset="image-large.jpg">
<!-- Tablet image -->
<source media="(min-width: 768px)" srcset="image-medium.jpg">
<!-- Mobile image (default) -->
<img src="image-small.jpg" alt="Responsive image">
</picture>
<!-- With WebP support -->
<picture>
<source type="image/webp" srcset="image.webp">
<source type="image/jpeg" srcset="image.jpg">
<img src="image.jpg" alt="Modern image format">
</picture>
6. Responsive Typography
Fluid Typography with clamp()
/* Modern approach using clamp() */
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
/* min: 1.5rem, preferred: 5vw, max: 3rem */
}
h2 {
font-size: clamp(1.25rem, 4vw, 2rem);
}
p {
font-size: clamp(1rem, 2vw, 1.25rem);
line-height: 1.6;
}
/* Responsive line length */
.content {
max-width: 65ch; /* 65 characters wide */
margin: 0 auto;
}
Traditional Responsive Typography
/* Base mobile typography */
body {
font-size: 16px;
line-height: 1.5;
}
h1 {
font-size: 1.75rem;
}
/* Tablet */
@media screen and (min-width: 768px) {
body {
font-size: 18px;
}
h1 {
font-size: 2.5rem;
}
}
/* Desktop */
@media screen and (min-width: 1024px) {
body {
font-size: 20px;
}
h1 {
font-size: 3rem;
}
}
7. Breakpoints Strategy
Content-Based Breakpoints
Add breakpoints where your content breaks, not at specific device sizes:
- Start with mobile design
- Expand browser width
- Add breakpoint when layout breaks
- Repeat for larger sizes
Common Breakpoint Values
/* Small devices */
@media (min-width: 576px) { }
/* Medium devices */
@media (min-width: 768px) { }
/* Large devices */
@media (min-width: 992px) { }
/* Extra large devices */
@media (min-width: 1200px) { }
/* Extra extra large */
@media (min-width: 1400px) { }
💡 Best Practices
- Use relative units (rem, em, %) instead of pixels
- Test on real devices, not just browser resize
- Consider touch targets (minimum 44x44px)
- Optimize images for different screen sizes
- Use system fonts for better performance
- Avoid horizontal scrolling
- Test with slow network connections
Practice Exercises
Create a responsive navigation that:
- Shows a hamburger menu on mobile
- Displays horizontal menu on tablet and desktop
- Uses mobile-first approach
- Has smooth transitions
Create a card grid that displays:
- 1 column on mobile
- 2 columns on tablet
- 3 columns on desktop
- 4 columns on large desktop
Create a hero section with:
- Different background images for mobile/tablet/desktop
- Responsive typography using clamp()
- Centered content that adapts to screen size
- Call-to-action button with appropriate sizing
🎉 Summary
You've completed the Responsive Design course! You now know:
- How to configure viewport for responsive design
- Mobile-first design principles and implementation
- Effective use of media queries
- Creating fluid layouts with modern CSS
- Implementing responsive images
- Responsive typography techniques
- Strategic breakpoint planning
Total points available: 10/10