CSS Media Query: Syntax, Usage, and Examples

CSS media queries let you create responsive designs by applying styles based on screen size, resolution, or device type. They allow layouts to adjust dynamically for different devices, from mobile phones to large desktop screens. By using media queries effectively, you ensure websites look and function well across various devices without requiring separate versions of a webpage.

How to Use CSS Media Queries

A CSS media query consists of a @media rule, a condition (such as screen width), and the styles that apply when the condition is met.

@media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

When the screen width is 600 pixels or smaller, the background color changes to light gray.

Using Min and Max Width Together

Combining min-width and max-width helps target a specific range of screen sizes.

@media (min-width: 600px) and (max-width: 1200px) {
  body {
    background-color: lightblue;
  }
}

This rule applies a light blue background only to screens between 600px and 1200px wide.

Applying Media Queries to Specific Elements

Instead of modifying the entire page, media queries can target specific elements:

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

On smaller screens, this hides the navigation menu, improving the mobile browsing experience.

When to Use CSS Media Queries

Media queries play a crucial role in building responsive websites. Here are three common use cases:

1. Making Websites Mobile-Friendly

Users access websites from different devices, including phones, tablets, and desktops. A well-optimized mobile experience improves engagement and usability.

@media (max-width: 768px) {
  .content {
    font-size: 14px;
    padding: 10px;
  }
}

This ensures text remains readable and content maintains proper spacing on smaller screens.

2. Adjusting Layouts for Different Screen Sizes

Websites often need different layouts based on screen size. By defining screen-specific styles, you create an adaptive experience.

@media (min-width: 1024px) {
  .sidebar {
    width: 300px;
  }
}

This increases the sidebar width on larger screens where more space is available.

3. Enhancing Performance with Conditional Loading

Media queries allow you to load only necessary styles for a particular device, improving page speed and performance.

@media (max-width: 600px) {
  .high-res-image {
    display: none;
  }
}

Hiding high-resolution images on small screens prevents unnecessary data consumption.

Examples of CSS Media Queries in Action

CSS Media Query Breakpoints

Breakpoints define screen widths at which styles should change. A common approach includes:

@media (max-width: 480px) { /* Small phones */ }
@media (max-width: 768px) { /* Tablets */ }
@media (max-width: 1024px) { /* Laptops */ }
@media (max-width: 1200px) { /* Large screens */ }

These media query breakpoints help maintain a consistent responsive design.

CSS Media Query for Mobile Devices

A simple media query can optimize the user experience for mobile devices.

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

This changes the layout from horizontal to vertical on smaller screens.

Combining Media Queries for a Flexible Layout

@media (min-width: 768px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .grid {
    display: block;
  }
}

This makes a grid layout collapse into a single-column format on smaller devices.

Learn More About CSS Media Queries

CSS Media Queries Min and Max

Using min-width and max-width together provides better control over layout changes.

@media (min-width: 600px) and (max-width: 900px) {
  .box {
    background-color: yellow;
  }
}

This targets screens between 600px and 900px.

How to Use CSS Media Queries for Responsive Design

Responsive web design ensures websites look good on all devices. By using media queries, you can dynamically adjust font sizes, margins, and layouts.

@media (max-width: 768px) {
  .content {
    padding: 10px;
    font-size: 16px;
  }
}

This improves content readability on smaller screens.

Media Query CSS Example for a Full-Page Responsive Layout

This example demonstrates a fully responsive page using media queries:

body {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  body {
    flex-direction: row;
  }
}

On mobile devices, the layout stacks vertically, while on larger screens, elements align horizontally.

CSS Media Query Breakpoints for Different Devices

Breakpoints allow styles to adjust dynamically based on device size:

@media (max-width: 576px) { /* Extra small devices (phones) */ }
@media (min-width: 577px) and (max-width: 768px) { /* Small devices (tablets) */ }
@media (min-width: 769px) and (max-width: 992px) { /* Medium devices (desktops) */ }
@media (min-width: 993px) { /* Large devices */ }

By using these breakpoints, you can tailor styles for each device type.

Responsive Design with CSS Media Queries

Media queries create fluid layouts by adjusting elements based on screen size. The following example changes text alignment dynamically:

@media (max-width: 800px) {
  .text-container {
    text-align: center;
  }
}

@media (min-width: 801px) {
  .text-container {
    text-align: left;
  }
}

This centers text on small screens while keeping it left-aligned on larger ones.

CSS Media Query for Print Styles

Media queries also apply to print-friendly layouts:

@media print {
  body {
    background-color: white;
    font-size: 12px;
  }
}

This removes background colors and adjusts font sizes for printed pages.

Optimizing CSS Media Queries for Performance

To improve efficiency, avoid excessive media queries. Instead, group similar styles together:

@media (max-width: 768px), (max-width: 1024px) {
  .nav {
    display: none;
  }
}

This combines multiple conditions, reducing redundant code.

CSS Media Queries vs. JavaScript-Based Responsive Design

While media queries control CSS styles, JavaScript can also adjust elements dynamically. However, CSS media queries are often more efficient since they don’t require scripting.

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

This method eliminates the need for JavaScript to detect screen width and hide elements.

CSS media queries are essential for modern web design. By using them effectively, you can create flexible, device-friendly layouts that ensure an optimal user experience across all screen sizes.