CSS Media Queries

What Are CSS Media Queries?

Media queries allow CSS styles to be applied only when specific conditions are met. These conditions can include screen width, height, orientation, resolution, hover support, color scheme, reduced motion preferences, and more.

@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}

In this example, the CSS rules apply only when the viewport width is 768 pixels or smaller.

Why Media Queries Are Important

• Create responsive websites for all devices.
• Improve mobile user experience.
• Support tablets, desktops, and large screens.
• Adapt layouts without JavaScript.
• Improve accessibility.
• Support modern device capabilities.
• Enhance SEO through mobile friendliness.
• Enable mobile-first development.

CSS Media Queries Cheatsheet

CSS Media Query Syntax

Media queries use the @media rule followed by one or more conditions.

@media (condition) {
  selector {
    property: value;
  }
}

Multiple conditions can be combined using logical operators.

Mobile-First Media Queries

Modern responsive design follows a mobile-first approach. Base styles target mobile devices, then larger screens receive enhancements.

.card {
  padding: 1rem;
}

@media (min-width: 768px) {
  .card {
    padding: 2rem;
  }
}

@media (min-width: 1200px) {
  .card {
    padding: 3rem;
  }
}

Mobile-first development generally produces cleaner and more maintainable CSS.

Desktop-First Media Queries

Desktop-first development starts with desktop styles and reduces functionality for smaller screens.

.card {
  padding: 3rem;
}

@media (max-width: 768px) {
  .card {
    padding: 1rem;
  }
}

While still used, mobile-first design is generally recommended.

Common Responsive Breakpoints

Use breakpoints based on your content rather than specific devices whenever possible.

Orientation Media Queries

Orientation queries allow styles to change when devices rotate.

@media (orientation: landscape) {
  .hero {
    height: 100vh;
  }
}

@media (orientation: portrait) {
  .hero {
    height: auto;
  }
}

Dark Mode Media Queries

Modern browsers support user color scheme preferences.

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

Dark mode improves user comfort and battery efficiency on OLED displays.

Reduced Motion Media Queries

Some users prefer reduced motion because of vestibular disorders or motion sensitivity.

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

Supporting reduced motion is an important accessibility practice.

Hover and Pointer Media Queries

Modern devices support different interaction methods.

@media (hover: hover) {
  .button:hover {
    transform: scale(1.05);
  }
}

@media (pointer: coarse) {
  .button {
    min-height: 44px;
  }
}

These media features help optimize touch interfaces.

Print Media Queries

Print styles optimize content for physical printing.

@media print {
  nav,
  footer,
  .advertisement {
    display: none;
  }
}

Print styles improve readability and reduce wasted paper.

Responsive Layout Example

.layout {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 250px 1fr;
  }
}

@media (min-width: 1200px) {
  .layout {
    grid-template-columns: 300px 1fr;
  }
}

This layout adapts smoothly from mobile to desktop.

Container Queries vs Media Queries

Media queries remain the foundation of responsive web design, while container queries are increasingly used for component-level responsiveness.

Media Queries and Accessibility

• Support reduced motion preferences.
• Provide dark mode support.
• Optimize touch targets for mobile users.
• Ensure layouts remain usable at high zoom levels.
• Improve readability across devices.

Media Queries and SEO

Media queries contribute indirectly to SEO by helping create mobile-friendly websites that provide better user experiences.

• Support responsive layouts.
• Improve mobile usability.
• Reduce bounce rates.
• Improve engagement metrics.
• Support Core Web Vitals optimization.
• Enable mobile-first indexing readiness.

Common Media Query Mistakes

• Creating too many breakpoints.
• Using device-specific breakpoints.
• Ignoring mobile-first development.
• Using fixed widths.
• Not testing on real devices.
• Ignoring accessibility preferences.
• Overwriting styles excessively.

CSS Media Query Best Practices

• Use mobile-first development.
• Choose content-driven breakpoints.
• Use relative units where possible.
• Support dark mode.
• Support reduced motion.
• Test across devices and orientations.
• Keep media queries organized.
• Use CSS Grid and Flexbox with media queries.
• Optimize performance and maintainability.

Key Takeaways

• Media queries enable responsive web design.
• Mobile-first development is recommended.
• Breakpoints should be content-driven.
• Media queries support accessibility preferences.
• Dark mode and reduced motion improve user experience.
• Media queries are essential for modern SEO and mobile usability.