HTML CSS - Media Queries

Advanced usage of media queries

Media queries are a powerful feature of CSS used to apply styles based on the characteristics of the viewport or device. They are essential for creating responsive designs. This tutorial covers advanced usage of media queries, enabling you to create more sophisticated and adaptable layouts.

Basic Syntax

The basic syntax for a media query is:

@media media-type and (condition) {
    /* CSS rules */
}
            

Here is an example that changes the background color for screens wider than 600px:

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

Combining Multiple Conditions

You can combine multiple conditions in a media query using logical operators such as and, or, and not:

• Using and: Applies styles if all conditions are true.

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

  This applies the styles only if the screen width is between 600px and 1200px.

• Using or (comma-separated): Applies styles if any condition is true.

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

  This applies the styles if the screen width is less than 600px or greater than 1200px.

• Using not: Negates a condition.

  
  @media not screen and (min-width: 600px) {
      body {
          background-color: lightyellow;
      }
  }
                          

  This applies the styles if the screen width is less than 600px.

Targeting Specific Devices

Media queries can target specific types of devices such as screens, print, or handheld devices. Here are some examples:

• Screen: Applies styles for screen devices.

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

• Print: Applies styles for printed documents.

  
  @media print {
      body {
          background-color: white;
          color: black;
      }
  }
                          

• Handheld: Applies styles for handheld devices.

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

Using Media Features

Media features allow you to apply styles based on specific characteristics of the device or browser. Here are some common media features:

• Width and Height: Apply styles based on the width or height of the viewport.

  
  @media screen and (min-height: 500px) {
      body {
          background-color: lightpink;
      }
  }
                          

• Aspect Ratio: Apply styles based on the aspect ratio of the viewport.

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

• Orientation: Apply styles based on the orientation of the device (landscape or portrait).

  
  @media screen and (orientation: landscape) {
      body {
          background-color: lightyellow;
      }
  }
                          

• Resolution: Apply styles based on the resolution of the device.

  
  @media screen and (min-resolution: 300dpi) {
      body {
          background-color: lightcyan;
      }
  }
                          

Media Queries with JavaScript

You can also use media queries in JavaScript to apply dynamic styles based on the current state of the viewport. Here is an example:

<script>
    const mediaQuery = window.matchMedia('(min-width: 600px)');
    
    function handleMediaQuery(event) {
        if (event.matches) {
            document.body.style.backgroundColor = 'lightblue';
        } else {
            document.body.style.backgroundColor = 'lightcoral';
        }
    }
    
    mediaQuery.addEventListener('change', handleMediaQuery);
    handleMediaQuery(mediaQuery);
</script>
            

Summary

In this tutorial, you learned about the advanced usage of media queries in CSS. You explored how to combine multiple conditions, target specific devices, use various media features, and apply media queries with JavaScript. Understanding advanced media queries is essential for creating responsive and adaptive web designs that work well across different devices and screen sizes.