Skip to main content
CSS for Beginners
CHAPTER 09 Beginner

CSS Responsive Design and Media Queries

Updated: May 10, 2026
5 min read

# Responsive Design & Media Queries

1. Introduction

Your website will be viewed on massive 4K monitors and tiny 4-inch smartphones. Responsive Design is the practice of building websites that automatically adapt their layout to fit the screen size.

2. Learning Objectives

  • Understand the <meta viewport> tag.
  • Write Media Queries using @media.
  • Implement a Mobile-First design strategy.
  • Use fluid units (vw, vh, %).

3. Detailed Explanations

The Viewport Meta Tag

Always include this in your HTML <head>. It tells mobile devices NOT to zoom out and pretend to be a desktop computer.
html
1 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queries

Media queries act like "if statements" for CSS. They apply specific styles only when the browser window matches a condition (like width).
css
1234567891011 
/* Base styles apply to ALL screens */
body {
    background-color: white;
}

/* If screen is 768px wide OR LARGER, apply these styles */
@media (min-width: 768px) {
    body {
        background-color: lightgray;
    }
}

Mobile-First vs Desktop-First

  • Mobile-First (Recommended): Write your base CSS for mobile. Use @media (min-width) to add complexity as the screen gets larger.
  • Desktop-First: Write for desktop, use @media (max-width) to squash it down for mobile.

Responsive Images

Images will overflow their containers and cause horizontal scrolling if not handled.
css
12345 
/* Make all images responsive automatically! */
img {
    max-width: 100%;
    height: auto;
}

4. Mini Project: Responsive Portfolio Grid

Let's build a layout that is 1 column on mobile, 2 columns on tablets, and 3 columns on desktops.
html
12345 
<div class="portfolio">
    <div class="project">Project A</div>
    <div class="project">Project B</div>
    <div class="project">Project C</div>
</div>
css
1234567891011121314151617181920212223242526272829 
/* Base (Mobile First): 1 Column */
.portfolio {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
}

.project {
    background: #3b82f6;
    color: white;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
}

/* Tablet: 2 Columns */
@media (min-width: 768px) {
    .portfolio {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop: 3 Columns */
@media (min-width: 1024px) {
    .portfolio {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

5. MCQs

Q1: Which @media rule is used in a mobile-first workflow? A) @media (max-width) B) @media (min-width) C) @media (mobile) D) @media (screen-size) *Answer: B*

6. Summary

Responsive design is mandatory. Always start by writing CSS for small screens, test your layout, and then use @media (min-width: ...) to add columns and adjust typography for tablets and desktops.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter CSS Grid Complete Guide
Next Chapter CSS Transitions, Transforms, and Animations

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1