CSS Media Queries: Breakpoints, Syntax, and Device Rules

Master CSS media queries. Learn how to write media query rules, select standard layout breakpoints, and use min-width vs. max-width limits.

Introduction

Styling base layouts for mobile screens handles initial page loads, but how do we expand layouts when users view our site on tablets, laptops, or ultrawide monitors? We need to apply styles conditionally based on the user's screen size.

This conditional styling is handled by CSS Media Queries. Part of the CSS3 standard, media queries allow you to inspect the device's viewport width, resolution, and orientation, applying specific stylesheets only when those conditions are met. Understanding media query syntax and selecting standard breakpoints is essential to building responsive layouts.

What You Will Learn

  • How to write media query syntax rules.
  • The difference between min-width and max-width queries.
  • Selecting standard layout breakpoints (mobile, tablet, desktop).
  • Combining multiple conditions using logical operators (and, not, only, ,).
  • Testing print styles using media types.

Prerequisites

Detailed Explanation: Media Query Syntax

A media query consists of a Media Type, one or more Media Expressions (Features), and a block of CSS rules:

@media screen and (min-width: 768px) {
  /* CSS rules inside here only apply if screen width is 768px or wider */
  body {
    background-color: #f8fafc;
  }
}

Breaking down the syntax:

  1. @media: Tells the browser that this rule contains conditional styling.
  2. screen (Media Type): Specifies the target device class. Common types include:
    • screen: Used for computer screens, tablets, and smartphones.
    • print: Used for print previews and page printing.
    • all: (Default) Applies to all devices.
  3. and (Logical Operator): Combines the media type with media features.
  4. (min-width: 768px) (Media Feature): The condition that must be met. In this case, the viewport width must be at least 768px.

Choosing Standard Breakpoints

Avoid choosing breakpoints based on specific device models (like styling exclusively for the "iPhone 15 Pro"). New phone models with unique sizes launch constantly, which will break device-specific layouts.

Instead, select breakpoints based on standard device ranges (such as tablets or laptops) where layouts naturally need to shift.

Common Industry Breakpoints:

  • 576px: Landscape phones / Small tablets.
  • 768px: Medium tablets (e.g. iPad portrait).
  • 992px: Large tablets (landscape) / Small laptops.
  • 1200px: Standard desktop monitors.
  • 1400px: Large desktop screens.
/* Mobile styles (Default) */
.col { width: 100%; }

/* Tablet upgrade */
@media (min-width: 768px) {
  .col { width: 50%; }
}

/* Desktop upgrade */
@media (min-width: 1200px) {
  .col { width: 25%; }
}

Combining Conditions (Logical Operators)

You can combine conditions to target specific screen size ranges:

  • The and Operator: All conditions must be met. 
    /* Target screens between 768px and 1024px wide */
@media screen and (min-width: 768px) and (max-width: 1024px) { ... }
  • The , (Comma) Operator: Acts like an OR operator. The rules apply if any of the conditions are met. 
    /* Target print outputs OR small screens */
@media print, (max-width: 480px) { ... }

Visual Learning Diagram (Mermaid)

graph TD
    ViewportWidth[Browser Viewport Resizing] --> Check1{Width < 768px?}
    Check1 -->|Yes| ApplyMobile[Apply Base Mobile Styles]
    Check1 -->|No| Check2{Width 768px to 1199px?}
    Check2 -->|Yes| ApplyTablet[Apply Tablet Media Styles]
    Check2 -->|No| ApplyDesktop[Apply Desktop Media Styles]

Code Examples

Example 1: Creating a Responsive Grid Card Layout

Shift columns from 1 column (mobile) to 2 columns (tablet) and 4 columns (desktop):

/* Mobile base layout */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet columns (min-width: 768px) */
@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* Desktop columns (min-width: 1200px) */
@media (min-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

Example 2: Optimizing Layouts for Print

Clean up your webpage layout to make it print-friendly by removing navigation headers, sidebars, and ads:

@media print {
  /* Hide navigation, widgets, and sidebars on print pages */
  .site-header, .sidebar, .ad-banner {
    display: none;
  }
  
  /* Make content occupy the full print width */
  .main-content {
    width: 100%;
    color: #000000; /* Force dark text to save printer ink */
    font-size: 12pt;
  }
}

Best Practices & Common Mistakes

  • Avoid Breakpoint Bloat: Do not write media queries every 50px (e.g. @media (min-width: 450px), @media (min-width: 500px)). Keep your breakpoints limited to 3 or 4 standard values to keep your stylesheets manageable.
  • Nested Media Queries: Avoid writing media queries inside random component declarations unless you are using CSS Nesting or preprocessors. Grouping media queries at the bottom of your stylesheet or keeping them alongside their component blocks makes your code easier to read and maintain.

FAQs

Q: Can I use relative units like em or rem in media queries? A: Yes! Using relative units in media queries (e.g., @media (min-width: 40em)) is a best practice. The browser calculates these values based on the default browser font size (usually 16px). E.g., 40em equals $40 \times 16 = 640\text{px}$.

Q: Does ordering matter in media queries? A: Yes! In mobile-first CSS, write your media queries in ascending order (smallest min-width to largest). If you write a larger query before a smaller one, the CSS cascade rules may cause the smaller query to override the larger one unexpectedly.

Summary

CSS media queries apply styles conditionally. By inspecting viewport widths using @media block rules, developers can target standard tablet or desktop breakpoints, combining parameters using operators like and or , (OR).

Related Articles

Next Tutorial

How do we build layouts and typography that scale fluidly between breakpoints? Let's check: Fluid Layouts & Responsive Typography.

← Back to Syllabus