The @media CSS at-rule is used to apply a different set of styles for different media/devices using the Media Queries. A Media Query is mainly used to check the height, width, resolution, and orientation (Portrait/Landscape) of the device. This CSS rule is a way out for making more out of responsive design by delivering a more optimized design for a specific screen type or device i.e. smartphone, or PC. The media queries can also be used for specifying certain styles only for printed documents or for screen readers.

Some of its key purposes:

• Responsive Design
• Adapting Layouts
• Modifying Typography
• Optimizing Images
• Changing Navigation Styles
• Switching CSS Themes
• Targeting Print Styles

Example:

@media (max-width: 600px) {
/* Styles for screens with a maximum width of 600px */
body {
font-size: 16px;
}
}