Skip to main content

Media Queries

Media queries are a cornerstone of responsive web design, allowing you to apply different styles based on various conditions, such as device screen size, resolution, and other features.

What Are Media Queries?​

Media queries are CSS techniques used to conditionally apply styles to different media types or devices. They enable you to design a single website that looks and functions well on a variety of platforms.

Basic Syntax​

The basic syntax of a media query consists of the @media rule followed by the media type and zero or more expressions that check for conditions of particular media features.

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

Media Types​

  1. all: Suitable for all devices.
  2. print: Intended for paged material and documents viewed on a screen in print preview mode.
  3. screen: Intended primarily for screens.
  4. speech: Intended for speech synthesizers.

Media Features​

  1. width and height: Width and height of the viewport.
  2. device-width and device-height: Width and height of the rendering surface.
  3. orientation: Detects if the device is in landscape or portrait mode.
  4. resolution: Pixel density of the device.
  5. aspect-ratio: Width-to-height aspect ratio of the viewport.
  6. color: Number of bits per color component of the output device.

Logical Operators​

  1. and: Combines multiple media features together into a single query.
  2. not: Negates the query.
  3. only: Restricts the style to the specific media type.
  4. , (comma): Combines multiple media queries into a single rule.

Best Practices​

  1. Mobile-First Approach: Use min-width rather than max-width to start with mobile styles and then scale up.
  2. Breakpoints: Choose breakpoints based on content rather than devices.
  3. Readability: Keep media queries close to their relevant rules for better maintainability.
  4. Performance: Limit the number of media queries for better performance.

Media queries break points​

When it comes to defining breakpoints in media queries, it's important to focus on the content rather than specific devices. However, there are some commonly used breakpoints that can serve as a good starting point.

  1. Mobile Devices

    • Small Mobile: max-width: 320px
    • Medium Mobile: max-width: 480px

  2. Tablets

    • Small Tablets: min-width: 481px and max-width: 768px
    • Large Tablets: min-width: 769px and max-width: 1024px

  3. Desktops

    • Small Desktops: min-width: 1025px and max-width: 1280px
    • Large Desktops: min-width: 1281px and max-width: 1440px

  4. 4K and Large Screens

    • min-width: 1441px and max-width: 2560px for 2K displays
    • min-width: 2561px for 4K displays and above

Importent points to consider​

  1. Content-First: Always test how the content adapts at different sizes and adjust breakpoints accordingly.

  2. Mobile-First: Start with mobile styles as your default and use min-width queries to build up to larger screens.

  3. Avoid Device-Specific Breakpoints: Device dimensions can change, so it's better to focus on how the content behaves.

  4. Test Extensively: Always test on real devices and use browser dev tools to simulate different screen sizes.

  5. Use Variables: If you're using pre-processors like SASS or LESS, you can store these breakpoints in variables for easier management.

Examples​

Basic Example​

@media screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

Using Logical Operators​

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Styles for tablets */
}

Multiple Queries​

@media (max-width: 600px), (max-height: 400px) {
  /* Styles for small screens or short viewports */
}

Orientation​

@media (orientation: landscape) {
  /* Styles for landscape orientation */
}

Learn more about Media Queries from MDN