How to apply the @media rule in CSS ?

The @media rule in CSS allows you to apply different styles for different media types or devices. It’s particularly useful for creating responsive designs that adapt to various screen sizes, resolutions, or other media characteristics.

The @media rule is used in combination with media queries to conditionally apply styles. Here are some things you can check with this tool: viewport width and height, device width and height, orientation, and resolution.

Syntax

/* Styles for screens with a width less than or equal to 600 pixels */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* Styles for printing */
@media print {
  body {
    font-size: 12pt;
  }
}

Features

• Responsive Design: Allows you to create styles tailored for different devices, ensuring a seamless user experience across various screens.
• Multiple Conditions: Combine multiple media queries for complex conditions.