In today's multi-device world, users expect websites to look great and function seamlessly on screens of all sizes—whether it’s a smartphone, tablet, laptop, or widescreen monitor. This demand has made responsive web design not just a best practice, but an essential part of modern web development.

Responsive web design is an approach that ensures a website’s layout, content, and functionality automatically adapt to the screen size and capabilities of the user's device. At the heart of this approach lies one powerful CSS feature: media queries.

With CSS media queries, developers can apply different styles depending on various device characteristics such as screen width, height, orientation, and resolution. This enables tailored experiences without needing separate codebases for mobile and desktop.

In this complete guide, you’ll learn everything you need to know about CSS media queries—from the basics and common breakpoints to advanced use cases and real-world examples. Whether you're just getting started or looking to fine-tune your responsive design skills, this tutorial will equip you with the knowledge and tools to create layouts that shine on any screen.

Let’s start by understanding what media queries are and how they work.

1. What Are CSS Media Queries?

CSS media queries are conditional rules that let you apply styles based on a device’s specific characteristics. They allow your CSS to respond to changes in screen size, resolution, orientation, and other features, making them the foundation of responsive design.

Basic Syntax

A media query follows this structure:

@media media-type and (media-feature) {
  /* CSS rules here */
}

Example:

@media screen and (max-width: 768px) {
  body {
    background-color: #f4f4f4;
  }
}

In this example, the background color will change when the screen width is 768px or less, such as on tablets and smaller devices.

Media Types

all – Applies to all devices (default if not specified)
screen – Used for screens (monitors, tablets, phones)
print – Used for print previews and printouts
speech – For screen readers and speech synthesizers

Example:

@media print {
  body {
    color: black;
    background: none;
  }
}

Media Features

Media features define the conditions under which the styles apply. Some of the most common ones include:

Feature	Description	Example
`width` / `height`	Exact viewport width or height	`min-width: 768px`
`max-width`	Maximum viewport width	`max-width: 1024px`
`orientation`	`portrait` or `landscape`	`orientation: portrait`
`resolution`	Dots per inch (DPI)	`min-resolution: 150dpi`
`prefers-color-scheme`	Light or dark mode support	`prefers-color-scheme: dark`

Example with multiple conditions:

@media screen and (max-width: 600px) and (orientation: portrait) {
  .menu {
    display: none;
  }
}

This rule hides the menu only when the screen is 600px wide or less and in portrait orientation.

2. Setting the Viewport

Before media queries can take full effect—especially on mobile devices—you must configure the viewport correctly. The viewport is the visible area of a web page in the user's browser, and by default, mobile browsers render pages at a desktop width and scale them down to fit.

The Viewport Meta Tag

To ensure your responsive styles behave as intended on mobile, include the following meta tag in the <head> section of your HTML:

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

What It Does

width=device-width: Sets the viewport width to match the device's screen width.
initial-scale=1.0: Sets the initial zoom level when the page is loaded.

Without this tag, your media queries may not work correctly, especially on smartphones, since the browser might still render your layout as if it's on a much wider screen.

Common Mistakes to Avoid

Missing the viewport tag entirely leads to non-responsive layouts on mobile.
Setting width=1024 or another fixed width — defeats the purpose of responsiveness.
Using user-scalable=no — restricts accessibility for users who need to zoom.

Here’s a complete example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, responsive world!</h1>
</body>
</html>

3. Common Breakpoints

Breakpoints are specific viewport widths at which your layout needs to adapt for better usability and aesthetics. They are typically based on the screen sizes of popular devices, but in practice, you should tailor breakpoints to your actual content, not just the device.

Recommended Breakpoints

While there's no one-size-fits-all set of breakpoints, the following are widely used as a starting point:

Device Type	Breakpoint Range	Example Media Query
Extra Small (Mobile)	≤ 480px	`@media (max-width: 480px)`
Small (Mobile)	481px – 767px	`@media (min-width: 481px) and (max-width: 767px)`
Medium (Tablet)	768px – 1024px	`@media (min-width: 768px) and (max-width: 1024px)`
Large (Laptop)	1025px – 1200px	`@media (min-width: 1025px)`
Extra Large (Desktop)	> 1200px	`@media (min-width: 1201px)`

These are just guidelines—you can adjust or add custom breakpoints depending on your layout needs.

Mobile-First vs Desktop-First

Mobile-First: Start with the base styles for small screens, then scale up using min-width media queries. This is the recommended approach today.

/* Mobile-first base styles */
.container {
  padding: 1rem;
}

/* Add styles for tablets and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

Desktop-First: Begin with styles for large screens and scale down using max-width.

/* Desktop-first base styles */
.container {
  padding: 2rem;
}

/* Adjust for smaller screens */
@media (max-width: 767px) {
  .container {
    padding: 1rem;
  }
}

Tip: Test on Real Devices

Breakpoints should reflect where your design “breaks”—i.e., where content starts to look cramped or too spaced out. Don’t rely solely on default device sizes; test your layout and adjust breakpoints accordingly.

4. Building a Responsive Layout

To truly leverage the power of media queries, you need to structure your page using a layout system that responds well to different screen sizes. Today’s go-to layout methods are Flexbox and CSS Grid, both of which work beautifully with media queries to create fluid and responsive designs.

Example: Responsive Layout Using Flexbox

Let’s build a simple two-column layout that stacks on smaller screens.

HTML

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="content">Main Content</div>
</div>

CSS

.container {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

.sidebar {
  flex: 1;
  background-color: #eee;
}

.content {
  flex: 3;
  background-color: #ddd;
}

/* Responsive adjustment for screens 768px and below */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

This layout:

Displays two columns on larger screens
Stacks the sidebar and content vertically on tablets and mobile devices

Example: Responsive Grid Layout Using CSS Grid

<div class="grid">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
  <div>Box 4</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* Adjust to 2 columns on tablets */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Stack to 1 column on mobile */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

This layout:

Shows 4 columns on desktop
Adapts to 2 on tablets and 1 on phones
Ensures content remains readable and clean on all screen sizes

Pro Tips

Use relative units like %, em, or fr for flexibility
Combine layout techniques (Grid for macro layout, Flexbox for micro layout)
Always test responsiveness with real content and imagery

5. Responsive Typography and Images

Designing for multiple screen sizes goes beyond just layout. You also need to ensure your text and images scale appropriately, maintaining readability and visual appeal across devices.

Responsive Typography

Font sizes that look perfect on desktops can be too small on mobile screens, or too large on tablets. The key is to use relative units and media queries for fine-tuning.

Use Relative Units

em – relative to the parent element
rem – relative to the root element (html)
% – relative to the parent container
vw – relative to the viewport width

Example

body {
  font-size: 1rem; /* base size */
}

h1 {
  font-size: 2.5rem;
}

/* Scale up font on large screens */
@media (min-width: 1024px) {
  h1 {
    font-size: 3rem;
  }
}

Or use viewport-based units for fully fluid scaling:

h1 {
  font-size: calc(1.2rem + 2vw);
}

This makes the heading size grow with the screen width.

6. Advanced Media Query Techniques

Once you’ve mastered the basics of media queries, you can start using more powerful combinations and features to create highly adaptable and intelligent designs.

Combining Multiple Conditions

You can use logical operators such as and, , (comma), not, and only to create more complex rules.

✅ `and` – Combine Conditions

@media screen and (min-width: 768px) and (orientation: landscape) {
  .sidebar {
    display: block;
  }
}

Only applies when both the screen is at least 768px and in landscape orientation.

✅ `,` (Comma) – Target Multiple Ranges

@media (max-width: 600px), (min-width: 1200px) {
  .promo-banner {
    display: none;
  }
}

This hides .promo-banner on very small or very large screens.

Dark Mode Support with `prefers-color-scheme`

Detect if the user has enabled dark mode in their OS or browser:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f4f4f4;
  }
}

You can also adapt buttons, icons, or even load dark-mode-specific images.

Accessibility Queries

Support user preferences like reduced motion to improve accessibility:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

This is especially important for users with vestibular disorders or motion sensitivity.

Custom Ranges and Fluid Responsiveness

Instead of hard breakpoints, you can define custom ranges that better match your content’s needs.

@media (min-width: 700px) and (max-width: 999px) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}

This applies the layout tweak only between 700px and 999px, offering precise control.

7. Real-World Example: Responsive Landing Page

Let’s apply everything you’ve learned so far to build a simple, responsive landing page. This example will demonstrate:

A mobile-first layout using Flexbox
Media queries for layout and typography adjustments
Responsive images
Dark mode support

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Responsive Landing Page</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="header">
    <h1>My Responsive Site</h1>
    <p>Your go-to source for responsive design tips.</p>
  </header>

  <section class="features">
    <div class="feature">
      <img src="feature1.jpg" alt="Feature 1">
      <h2>Fast</h2>
      <p>Optimized for speed and performance on any device.</p>
    </div>
    <div class="feature">
      <img src="feature2.jpg" alt="Feature 2">
      <h2>Flexible</h2>
      <p>Adapts seamlessly from phone to desktop.</p>
    </div>
    <div class="feature">
      <img src="feature3.jpg" alt="Feature 3">
      <h2>Accessible</h2>
      <p>Designed with accessibility in mind.</p>
    </div>
  </section>

  <footer class="footer">
    &copy; 2025 My Responsive Site
  </footer>
</body>
</html>

CSS Styles (`styles.css`)

/* Base styles */
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #333;
}

.header {
  text-align: center;
  padding: 2rem 1rem;
  background: #e0f7fa;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1rem;
}

.feature {
  text-align: center;
}

.feature img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.footer {
  text-align: center;
  padding: 1rem;
  background: #eceff1;
}

/* Medium screens (tablets) */
@media (min-width: 768px) {
  .features {
    flex-direction: row;
    justify-content: space-between;
  }

  .feature {
    flex: 1;
    padding: 1rem;
  }
}

/* Large screens */
@media (min-width: 1024px) {
  .header h1 {
    font-size: 3rem;
  }

  .feature h2 {
    font-size: 2rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #f5f5f5;
  }

  .header {
    background: #1e1e1e;
  }

  .footer {
    background: #1e1e1e;
  }
}

Responsive Web Design with CSS Media Queries: Complete Guide - responsive landing page 1

Responsive Web Design with CSS Media Queries: Complete Guide - responsive landing page 2

This example includes:

Fluid layout with media queries adapting content per screen size
Responsive images using max-width: 100%
Accessible color adjustments for dark mode
Mobile-first styling with scaling as screen width increases

8. Testing Your Responsive Design

Building a responsive layout is only half the job—the other half is rigorous testing across a variety of screen sizes, devices, and browsers to ensure a consistent and usable experience.

Tools for Testing Responsiveness

✅ 1. Browser DevTools (Chrome, Firefox, Safari)

All modern browsers include responsive design tools.

Chrome DevTools:
- Right-click > Inspect > Toggle Device Toolbar (or press Ctrl+Shift+M / Cmd+Shift+M)
- Simulate phones, tablets, and custom sizes
- Rotate orientation and throttle network speed
Firefox Responsive Design Mode:
- Accessible via Tools > Browser Tools > Responsive Design Mode

✅ 2. Responsively App

An open-source desktop app that shows your site on multiple device previews simultaneously. Great for spotting layout inconsistencies quickly.
👉 https://responsively.app

✅ 3. Screen Size Simulators and BrowserStack

For cross-device and cross-browser testing, use:

BrowserStack
LambdaTest
Chrome extensions like "Window Resizer"

✅ 4. Real Devices

If possible, test on actual phones and tablets. Emulators are great, but nothing beats real-world touch, scroll, and performance feedback.

Common Issues to Look For

Overlapping or broken elements on narrow screens
Tiny fonts or tap targets on mobile
Fixed-width elements that overflow
Images not scaling properly
Horizontal scrolling (yikes!)
Missing viewport meta tag
Inaccessible contrast or missing dark mode support

Debugging Tips

Use outline: 1px solid red; to quickly identify layout boxes
Temporarily disable media queries to spot which rule is breaking
Inspect specific elements at different breakpoints
Use overflow: hidden; cautiously—it may mask deeper layout issues

Once your layout is fully tested and responsive, it’s time to review the best practices to keep your designs clean and scalable.

9. Best Practices for Responsive Web Design

Creating a responsive layout isn't just about writing media queries—it's about adopting a design mindset that anticipates flexibility, accessibility, and performance from the start. Here are some tried-and-true best practices to follow.

1. Embrace the Mobile-First Approach

Start with styles for the smallest screens, then scale up using min-width media queries. This ensures that mobile users get fast, streamlined experiences without unnecessary styles.

/* Mobile-first base */
.container {
  padding: 1rem;
}

/* Add enhancements for larger screens */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

2. Use Relative Units

Avoid fixed pixel values (px) for font sizes, spacing, and widths. Instead, use:

em or rem for typography
% or fr for widths and grids
vw/vh for scaling with the viewport

This keeps your design fluid and adaptable.

3. Test on Real Devices

Use actual phones, tablets, and desktops whenever possible. Emulators are helpful, but real interactions (like tap targets and scrolling behavior) can’t be fully replicated.

4. Optimize Images for All Screens

Use max-width: 100% to make images scale within their container
Consider srcset or <picture> for serving different image resolutions
Use next-gen formats like WebP or AVIF for better compression

5. Don’t Overuse Media Queries

Media queries are powerful, but don’t rely on dozens of tightly scoped breakpoints. Instead:

Design flexible layouts using Flexbox/Grid
Use min-content, auto, and fr units where possible
Write base styles that are naturally responsive

6. Consider Accessibility and Preferences

Respect prefers-reduced-motion and prefers-color-scheme
Ensure sufficient color contrast
Avoid fixed font sizes that users can’t zoom

7. Prioritize Performance

Minify CSS and load styles asynchronously where appropriate
Avoid loading heavy desktop styles on mobile
Use CSS containment and lazy loading for media

Following these practices ensures your site looks good, performs well, and works reliably across all devices and user preferences.

Conclusion

Responsive web design is no longer a luxury—it's a necessity in today’s multi-device world. With the right use of CSS media queries, you can create layouts that look and function beautifully across mobile phones, tablets, laptops, and beyond.

In this tutorial, we explored the core concepts of media queries, from syntax and breakpoints to real-world examples and advanced techniques like dark mode and accessibility preferences. We also built a responsive landing page, tested it across various devices, and followed best practices to ensure scalability and performance.

By taking a mobile-first, content-driven approach and embracing modern CSS layout systems like Flexbox and Grid, you’ll be well-equipped to build robust, user-friendly responsive websites.

Key Takeaways

Use the <meta name="viewport"> tag to enable responsiveness on mobile devices.
Write mobile-first styles and use min-width media queries to scale up.
Define custom breakpoints based on your content, not just device sizes.
Use relative units (rem, %, vw) to make typography and layouts flexible.
Incorporate dark mode and reduced motion support to enhance UX.
Test on real devices and simulate different environments using dev tools.
Keep your styles maintainable by avoiding excessive or overlapping media queries.

With CSS media queries in your toolbox, you're ready to tackle responsive design challenges with confidence.

You can get the full source code on our GitHub.

That's just the basics. If you need more deep learning about HTML, CSS, JavaScript, or related, you can take the following cheap course:

Thanks!

Responsive Web Design with CSS Media Queries: Complete Guide

Learn how to build responsive websites using CSS media queries with real examples, breakpoints, layout tips, and best practices in this complete guide.

Table of Contents: