Skip to main content

CSS Media Queries: What They Are, What They're For, and How to Use Them

Media queries front page

Media queries are a fundamental tool in modern web development. They allow your site to adapt to different devices and screen sizes, improving the user experience. In this guide, you'll learn what media queries are, how they work, and how to implement them in your projects.

What are Media Queries?​

Media queries are a powerful feature introduced in CSS3 that allows you to adapt the design of a web page to different screen sizes and devices. They use the rule@mediato conditionally apply CSS styles based on characteristics such as screen width, resolution, or device orientation.

What are Media Queries for?​

Media queries are key to achieving responsive web design. They allow content to display correctly on any device: from desktop screens to smartphones.

How Media Queries Work​

Media queries work by evaluating certain conditions of the user's environment, such as screen size. If the conditions are met, the CSS styles defined within the media query are applied.

Media Query Syntax​

CSS
@media (condición) {
  /* Estilos CSS */
}

Common Conditions​

-max-width: Applies styles if the screen width is less than or equal to the specified value.

-min-width: Applies styles if the screen width is greater than or equal to the specified value.

-orientation: Applies styles according to the device orientation (portrait or landscape).

-resolution: Applies styles according to screen resolution.

-aspect-ratio: Applies styles according to the screen's aspect ratio.

-prefers-color-scheme: Applies styles according to the user's theme preference (light or dark).

-hover: Applies styles if the device supports hover interactions.

Implementation Examples​

Change background color based on screen size​

If the browser window is 600px or smaller, the background color will be light blue:

The following approach is Mobile First. If the browser window is 600px or larger, the background color will be light blue. For screen sizes smaller than 600px, the black color defined outside the media query will be applied.

Change the design according to the device orientation​

CSS
@media (orientation: portrait) {
  body {
    font-size: 16px;
  }
}
@media (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

Change the design according to the user's theme preference​

CSS
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

Change the design according to the aspect ratio​

CSS
@media (aspect-ratio: 16/9) {
  body {
    background-color: lightgreen;
  }
}

Change the design based on the device's hover capabilities​

CSS
@media (hover: hover) {
  button {
    background-color: blue;
  }
}
@media (hover: none) {
  button {
    background-color: gray;
  }
}

How to Use Media Queries in Your Project​

To use media queries in your project, follow these steps:

  1. Define your breakpoints: Decide at what screen sizes you want the design to change. For example, you can use 600px, 900px, and 1200px.

  2. Write your base styles: Create a design that works well on small screens (mobile-first).

  3. Add media queries: Use the rule@mediato apply specific styles to the defined breakpoints.

  4. Test on different devices: Ensure your design looks good on all screen sizes and devices.

  5. Optimize performance: Group media queries and avoid duplicating styles to improve page load times.

Complete example of using Media Queries​

CSS
/* Estilos base para móviles */
body {
  font-size: 16px;
  background-color: white;
}
/* Media query para pantallas pequeñas */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
/* Media query para pantallas medianas */
@media (min-width: 601px) and (max-width: 900px) {
  body {
    background-color: lightgreen;
    font-size: 18px;
  }
}
/* Media query para pantallas grandes */
@media (min-width: 901px) {
  body {
    background-color: lightcoral;
    font-size: 20px;
  }
}

Considerations When Using Media Queries​

  • Breakpoints: Define logical breakpoints based on content and design, not just specific screen sizes.

  • Compatibility: Most modern browsers support media queries, but it's always a good idea to check compatibility with older browsers if necessary.

  • Performance: Avoid using too many media queries, as they can negatively impact page performance. Group common styles together to reduce redundancy.

  • Media Query Order: Place media queries at the end of your stylesheet or next to the style blocks they modify to maintain clarity and avoid conflicts.

Advantages of Using Media Queries​

  • Responsive Design: Allows your website to adapt to different devices and screen sizes, improving the user experience.

  • Flexibility: You can adjust the design and styles to meet the specific needs of each device.

  • Performance Improvement: By applying device-specific styles, you can optimize your website's loading speed and performance.

  • Accessibility: It makes it easier to create accessible websites, allowing users with different devices and configurations to view the content appropriately.

Media Queries and Responsive Design​

Media queries are an essential part of responsive design. They allow content to automatically adjust to different screen sizes, improving usability and accessibility. By combining media queries with techniques like flexbox and grid, you can create complex and adaptive designs.

Media Queries and Mobile-First Design​

The mobile-first approach involves designing for mobile devices first and then using media queries to adapt the design to larger screens. This ensures your website is accessible and functional on mobile devices, which are increasingly used for web browsing.

Media Queries and Desktop-First Design​

The desktop-first approach involves designing first for large screens and then using media queries to adapt the design to smaller devices. Although less common today, it can be useful in certain contexts where the target audience primarily uses desktop computers.

Media Queries and Adaptive Design​

Adaptive design uses media queries to create designs that adjust to different devices and screen sizes. Unlike responsive design, which flows and adapts continuously, adaptive design uses specific breakpoints to apply different styles to each.

Media Queries and Fluid Design​

Fluid design uses relative units such as percentages andemto create a design that adapts to the screen size. Media queries complement this approach by allowing specific adjustments at defined breakpoints, further improving the design's adaptability.

Media Queries and Modular Design​

Modular design involves creating reusable components that can be easily adjusted with media queries. This allows developers to create consistent and responsive designs without duplicating code, facilitating project maintenance and scalability.

Media Queries and Component-Based Design​

Component-based design involves dividing the design into independent components that can be reused and adapted with media queries. This allows for greater flexibility and scalability, as each component can have its own specific styles for different screen sizes.

Media Queries and Content-Based Design​

Content-based design focuses on adapting the design according to the content being displayed. Media queries allow the content's presentation to be adjusted based on screen size, ensuring that information is readable and accessible on all devices.

Media Queries and Context-Based Design​

Context-based design involves adapting the design to the user's environment, such as location, device, and preferences. Media queries allow you to adjust styles based on these variables, improving the user experience by providing a more relevant and personalized design.

Media Queries and User-Based Design​

User-based design involves adapting the design to the user's preferences and behaviors. Media queries allow you to adjust styles based on device characteristics, such as screen size and orientation, improving the user experience by providing a design better suited to their needs.

Media Queries and Functionality-Based Design​

Functionality-based design involves adapting the design to the device's characteristics and capabilities. Media queries allow you to adjust styles based on resolution, orientation, and other device characteristics, ensuring that content is displayed optimally on all devices.

Media Queries and Performance-Based Design​

Performance-based design involves optimizing the design and styles to improve loading speed and user experience. Media queries allow you to apply specific styles based on device capabilities, which can help reduce CSS file sizes and improve overall website performance.

Media Queries and Accessibility-Based Design​

Accessibility-based design involves adapting the design to be usable by people with disabilities. Media queries allow you to adjust styles according to user preferences, such as font size and contrast, improving website accessibility for all users.

Media Queries and Usability-Based Design​

Usability-based design involves creating a design that is easy to use and navigate. Media queries allow you to adjust styles based on screen size and device characteristics, improving usability by providing a more intuitive and accessible experience for users.

Media Queries and User Experience-Based Design​

User experience (UX)-based design involves creating a design that meets the user's needs and expectations. Media queries allow you to adjust styles based on the device and user preferences, improving the overall experience by providing a more tailored and relevant design.

Media Queries and Interaction-Based Design​

Interaction-based design involves adapting the design based on how users interact with the website. Media queries allow you to adjust styles based on device capabilities, such as hover or touch support, improving the user experience by providing a design better suited to their interactions.

Media Queries and Dynamic Content-Based Design​

Dynamic content-based design involves adapting the design based on the content displayed on the page. Media queries allow you to adjust styles based on screen size and device characteristics, ensuring that dynamic content is displayed optimally on all devices.

Media Queries and Static Content-Based Design​

Static content-based design involves adapting the layout to the fixed content displayed on the page. Media queries allow you to adjust styles based on screen size and device characteristics, ensuring that static content displays optimally on all devices.

Media Queries and Multimedia Content-Based Design​

Multimedia content-based design involves adapting the layout to the type of content displayed, such as images, videos, or audio. Media queries allow you to adjust styles based on screen size and device characteristics, ensuring that multimedia content displays optimally on all devices.

Media Queries and Interactive Content-Based Design​

Interactive content-based design involves adapting the layout to user interactions with the content, such as forms, buttons, or links. Media queries allow you to adjust styles based on screen size and device characteristics, improving the user experience by providing a design better suited to their interactions.

Best Practices with Media Queries​

  • Use multiple breakpoints depending on the design and content (e.g., 480px, 768px, 1024px).

  • Apply the mobile-first principle, writing styles for mobile devices and then adjusting them with media queries.

  • Group media queries at the end of your stylesheet or next to the style blocks they modify.

Resources